README

Yii 2 的 RangeSlider 扩展

基于 Ion.RangeSlider 扩展 的 Widget

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

php composer.phar require --prefer-dist yii2mod/yii2-ion-slider "*"

或者

"yii2mod/yii2-ion-slider": "*"

将其添加到 composer.json 的 require 部分。

使用方法

安装扩展后，只需将小部件添加到页面中即可，如下所示

1. 与 ActiveForm 和模型一起使用

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. 不使用 ActiveForm 和模型使用

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
    ]
]);
                                

要更改滑块皮肤，您可以在应用程序配置中配置 assetManager 数组

'assetManager' => [
            'bundles' => [
                'yii2mod\slider\IonSliderAsset' => [
                    'css' => [
                        'css/normalize.css',
                        'css/ion.rangeSlider.css',
                        'css/ion.rangeSlider.skinFlat.css'
                     ]
                ],
            ],
        ]

滑块选项

您可以使用 pluginOptions 自定义滑块，使用插件 选项 之一。注意，type 选项应单独配置，不属于 pluginOptions 数组。