README

安装

安装此扩展的首选方式是通过 https://getcomposer.org.cn/download/。

运行以下命令之一：

php composer.phar require ruskid/yii2-nouislider "dev-master"

或者将以下内容添加到你的 composer.json 文件的 require 部分：

"ruskid/yii2-nouislider": "dev-master"

```json

使用方法

• 请查阅 http://refreshless.com/nouislider/ 了解选项。
• 请查阅 https://refreshless.com/nouislider/events-callbacks/ 了解事件。

主要滑块

可以按照你的需求进行配置。此滑块非常简单，不执行任何特殊操作。如果你想更新隐藏输入框的值（在更改、滑动或更新等操作时），你需要定义自己的事件处理器。

use ruskid\nouislider\Slider;

echo $form->field($model, 'price')->widget(Slider::className(), [
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);

echo Slider::widget([
    'name' => 'test',
    'value' => 50,
    'events' => [
        Slider::NOUI_EVENT_CHANGE => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("changed"); }'),
        Slider::NOUI_EVENT_START => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("start sliding"); }'),
        Slider::NOUI_EVENT_END => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("end sliding"); }'),
        Slider::NOUI_EVENT_UPDATE => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("updated"); }'),
        Slider::NOUI_EVENT_SET => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("set"); }'),
        Slider::NOUI_EVENT_SLIDE => new \yii\web\JsExpression('function( values, handle ) {'
                . ' alert("slided"); }'),
    ],
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);

具有默认行为的滑块

你可以使用滑块目录中的某些滑块并创建自己的。扩展主要滑块。

提交你的滑块 pull request！

echo $form->field($model, 'price_min')->widget(OneHandleSlider::className(), [
    'valueContainerId' => 'price_min-container',
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);


echo $form->field($model, 'price_max')->widget(OneHandleSlider::className(), [
    'valueContainerId' => 'price_max-container',
    'pluginOptions' => [
        'start' => [20],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);

<div>Price min: <span id='price_min-container'></span></div>
<div>Price max: <span id='price_max-container'></span></div>

echo $form->field($model, 'price')->widget(TwoHandleSlider::className(), [
    'lowerValueContainerId' => 'price_min-container',
    'upperValueContainerId' => 'price_max-container',
    'pluginOptions' => [
        'start' => [20, 50],
        'connect' => false,
        'range' => [
            'min' => 0,
            'max' => 100
        ]
    ]
]);