https://github.com/yii2mod/yii2-ion-slider
Easily customizable range slider with skins support.
https://github.com/yii2mod/yii2-ion-slider
yii2 yii2-extension yii2-slider yii2-slider-widget
Last synced: 3 months ago
JSON representation
Easily customizable range slider with skins support.
- Host: GitHub
- URL: https://github.com/yii2mod/yii2-ion-slider
- Owner: yii2mod
- License: mit
- Created: 2015-02-02T18:53:14.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-08-06T21:47:35.000Z (almost 5 years ago)
- Last Synced: 2025-04-12T22:55:02.133Z (3 months ago)
- Topics: yii2, yii2-extension, yii2-slider, yii2-slider-widget
- Language: PHP
- Homepage:
- Size: 22.5 KB
- Stars: 22
- Watchers: 6
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
RangeSlider Extension for Yii 2
Widget based on [Ion.RangeSlider extension](http://ionden.com/a/plugins/ion.rangeSlider/en.html)
[](https://packagist.org/packages/yii2mod/yii2-ion-slider)
[](https://packagist.org/packages/yii2mod/yii2-ion-slider)
[](https://packagist.org/packages/yii2mod/yii2-ion-slider)
[](https://travis-ci.org/yii2mod/yii2-ion-slider)
Installation
------------
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```
php composer.phar require --prefer-dist yii2mod/yii2-ion-slider "*"
```
or add
```json
"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:
1) Usage with ActiveForm and model
```php
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);
}
')
]
]);
```
2) Usage without ActiveForm and model
```php
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:**
```php
'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](http://ionden.com/a/plugins/ion.rangeSlider/en.html).
Note that the `type` option should be configured on its own, and is not part of the `pluginOptions` array.