xandrkat/yii2-ion-slider

Ion.RangeSlider Widget for Yii 2

Installs: 7

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 12

Type:yii2-extension

1.2 2017-04-15 22:14 UTC

This package is auto-updated.

Last update: 2020-03-10 19:37:25 UTC


README

993323

RangeSlider Extension for Yii 2


Widget based on Ion.RangeSlider extension

Latest Stable Version Total Downloads License Build Status

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:

  1. 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);
                }
           ')
         ]
]); 
  1. 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.