yii2mod / yii2-ion-slider
Ion.RangeSlider Widget for Yii 2
Installs: 123 654
Dependents: 4
Suggesters: 0
Security: 0
Stars: 22
Watchers: 7
Forks: 13
Open Issues: 0
Type:yii2-extension
Requires
- bower-asset/ionrangeslider: *
- yiisoft/yii2: *
Requires (Dev)
This package is not auto-updated.
Last update: 2024-09-28 16:59:18 UTC
README
RangeSlider Extension for Yii 2
Widget based on Ion.RangeSlider extension
Installation
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.
Usage
Once the extension is installed, simply add widget to your page as follows:
- Usage with ActiveForm and model
echo $form->field($model, "attribute")->widget(\yii2mod\slider\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 \yii2mod\slider\IonSlider::widget([ 'name' => 'slider', 'type' => \yii2mod\slider\IonSlider::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' ] ], ], ]
Slider Options
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.