Yii 2 Slider

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-widgets extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

An advanced slider input for Yii Framework 2 based on seiyria/bootstrap-slider plugin, which is a fork of the bootstrap-slider by Stefan Petre from eyecon.ru. The slider input offers these advanced features
  • vertical or horizontal orientation of slider
  • setup your minimum and maximum values
  • setup your step increments
  • range selector (multiple handles to control the range)
  • three shapes for handles
  • touch capablity and support for touch devices

Additional enhancements added for this widget (by Krajee):

  • allows to configure slider selection and handle colors.
  • preselected styles to color your slider and handles.
  • automatically trigger change of base field on slider stop to enforce Yii ActiveField validation
  • automatically set plugin options based on base field value (parse array input value for range)
  • automatically disable slider based on disabled/readonly options.

The preferred way to install this extension is through composer. Either run:

$ php composer.phar require kartik-v/yii2-slider "*"

or add:

"kartik-v/yii2-slider": "*"

to the require section of your composer.json file. Then run:

php composer.phar update

to get the updated package on your application install.

The Slider widget supports all the parameters similar to the \yii\widgets\InputWidget widget. In addition, the widget allows you to configure the following properties:
  • sliderColor: string, the hex color code for the selection part of the slider bar. You can use one of these preconfigured types:

    • Slider::TYPE_GREY

    • Slider::TYPE_PRIMARY

    • Slider::TYPE_SUCCESS

    • Slider::TYPE_DANGER

    • Slider::TYPE_WARNING

    • Slider::TYPE_INFO

  • handleColor: string, the hex color code for the handle that controls the slider bar. You can use one of these preconfigured types:

    • Slider::TYPE_GREY

    • Slider::TYPE_PRIMARY

    • Slider::TYPE_SUCCESS

    • Slider::TYPE_DANGER

    • Slider::TYPE_WARNING

    • Slider::TYPE_INFO

  • options: array the HTML attributes for the input tag.

  • pluginOptions: array the JQuery plugin options for the bootstrap-slider plugin. You can control many options for the plugin. Refer the plugin options documentation for details.

  • pluginEvents: array the bootstrap-slider plugin events. You must define events in event-name => event-function format. Refer the plugin events documentation for details. All events will be stacked in the sequence passed. For example:

    pluginEvents = [
        "slideStart" => "function() { log("slideStart"); }",
        "slide" => "function() { log("slide"); }",
        "slideStop" => "function() { log("slideStop"); }",
        "slideEnabled" => "function() { log("slideEnabled"); }",
        "slideDisabled" => "function() { log("slideDisabled"); }",
    ];
    

Range Select

If you are using a range select, you need to pass the 2 range values concatenated with a , (comma). Alternatively, if you have passed a single numeric value and set pluginOptions['range'] to true, then pluginOptions['max'] will be used as the second value.



Basic horizontal slider with ActiveForm. Check the model validation for values > 5 or < 1. You can also use arrow keys to navigate.



Style your slider selection and handle colors and choose your handle type. Set a preselected value. Set the tooltip to be always displayed.


A disabled slider input with a square handle.


$10 $1,000
A range select. Value must be passed as a delimited list separated by a , (comma). If your value is passed as a single number, and you have set pluginOptions['range'] to true, then max will be used for second value.

    
Change orientation to vertical and create multiple sliders of various colors. Reverse the slider values and ALWAYS show tooltip. Change handle to square. Set precision for incremented/decremented values and step to 0.1.
use kartik\slider\Slider;

// Basic horizontal slider with ActiveForm. Check the model validation for values 
// > 5 or < 1. You can also use arrow keys to navigate.
echo $form->field($model, 'rating')->widget(Slider::classname(), [
    'pluginOptions'=>[
        'min'=>0,
        'max'=>20,
        'step'=>1
    ]
]);

// Style your slider selection and handle colors and choose your handle type. 
// Set a preselected value. Set the tooltip to be always displayed.
echo Slider::widget([
    'name'=>'rating_1',
    'value'=>7,
    'sliderColor'=>Slider::TYPE_GREY,
    'handleColor'=>Slider::TYPE_DANGER,
    'pluginOptions'=>[
        'handle'=>'triangle',
        'tooltip'=>'always'
    ]
]);

// A disabled slider input with a square handle.
echo Slider::widget([
    'name'=>'rating_2',
    'value'=>3,
    'pluginOptions'=>[
        'handle'=>'square'
    ],
    'options'=>['disabled'=>true]
]);

// A range select. Value must be passed as a delimited list separated by a `,` (comma). 
// If your value is passed as a single number, and you have set `pluginOptions['range']`
// to `true`, then `max` will be used for second value.
echo '<b class="badge">$10</b> ' . Slider::widget([
    'name'=>'rating_3',
    'value'=>'250,650',
    'sliderColor'=>Slider::TYPE_GREY,
    'pluginOptions'=>[
        'min'=>10,
        'max'=>1000,
        'step'=>5,
        'range'=>true
    ],
]) . ' <b class="badge">$1,000</b>';

// Change orientation to vertical and create multiple sliders of various colors. Reverse the slider values. 
// and ALWAYS show tooltip. Change handle to square. Set precision for incremented/decremented values and step to 0.01.
$sep = '<span style="margin-right:50px">&nbsp;</span>';
echo Slider::widget([
    'name'=>'rating_4',
    'value'=>7.427, // Slider will instantiate showing 7.43 due to specified precision
    'sliderColor'=>Slider::TYPE_PRIMARY,
    'handleColor'=>Slider::TYPE_PRIMARY,
    'pluginOptions'=>[
        'precision'=>2,
        'orientation'=>'vertical',
        'handle'=>'square',
        'step'=>0.01,
        'reversed'=>true,
        'tooltip'=>'always'
    ],
]);
echo $sep;
echo Slider::widget([
    'name'=>'rating_4a',
    'value'=>5.95, 
    'sliderColor'=>Slider::TYPE_SUCCESS,
    'handleColor'=>Slider::TYPE_SUCCESS,
    'pluginOptions'=>[
        'precision'=>2,
        'orientation'=>'vertical',
        'handle'=>'square',
        'step'=>0.01,
        'reversed'=>true,
        'tooltip'=>'always'
    ],
]);
echo $sep;
echo Slider::widget([
    'name'=>'rating_4b',
    'value'=>4.04,
    'sliderColor'=>Slider::TYPE_WARNING,
    'handleColor'=>Slider::TYPE_WARNING,
    'pluginOptions'=>[
        'precision'=>2,
        'orientation'=>'vertical',
        'handle'=>'square',
        'step'=>0.01,
        'reversed'=>true,
        'tooltip'=>'always'
    ],
]);
echo $sep;
echo Slider::widget([
    'name'=>'rating_4c',
    'value'=>2.54,
    'sliderColor'=>Slider::TYPE_DANGER,
    'handleColor'=>Slider::TYPE_DANGER,
    'pluginOptions'=>[
        'precision'=>2,
        'orientation'=>'vertical',
        'handle'=>'square',
        'step'=>0.01,
        'reversed'=>true,
        'tooltip'=>'always'
    ],
]);
echo $sep;
echo Slider::widget([
    'name'=>'rating_4d',
    'value'=>1.02,
    'sliderColor'=>Slider::TYPE_INFO,
    'handleColor'=>Slider::TYPE_INFO,
    'pluginOptions'=>[
        'precision'=>2,
        'orientation'=>'vertical',
        'handle'=>'square',
        'step'=>0.01,
        'reversed'=>true,
        'tooltip'=>'always'
    ],
]);

yii2-slider is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.