- Widget based on Ion.RangeSlider extension http://ionden.com/a/plugins/ion.rangeSlider/en.html
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist yii2mod/yii2-ion-slider "*"
or add
"yii2mod/yii2-ion-slider": "*"to the require section of your composer.json.
Once the extension is installed, simply add widget to your page as follows:
- Usage with ActiveForm and model
echo $form->field($model, "attribute")->widget(IonSlider::className(), [
'pluginOptions' => [
'min' => 0,
'max' => 1,
'step' => 1,
'onChange' => new \yii\web\JsExpression('
function(data) {
console.log(data);
}
')
]
]); - Usage without ActiveForm and model
echo IonSlider::widget([
'name' => "slider",
'type' => "double",
'pluginOptions' => [
'min' => 0,
'max' => 20,
'from' => 2,
'to' => 18,
'step' => 1,
'hide_min_max' => true,
'hide_from_to' => true
]
]);
- To change the slider skin, you can configure the assetManager array in your application configuration:
'assetManager' => [
'bundles' => [
'yii2mod\slider\IonSliderAsset' => [
'css' => [
'css/normalize.css',
'css/ion.rangeSlider.css',
'css/ion.rangeSlider.skinFlat.css'
]
],
],
]You can customize the slider using pluginOptions, using one of the plugin options.
Note that the type option should be configured on its own, and is not part of the pluginOptions array.