PHP code example of ruskid / yii2-nouislider

1. Go to this page and download the library: Download ruskid/yii2-nouislider library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

ruskid / yii2-nouislider example snippets



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



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

sh
php composer.phar