Slider supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the Slider::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set Slider::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set Slider::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set Slider::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-slider extension can be installed automatically or manually using one of these options:

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

"kartik-v/yii2-slider": "dev-master"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• pluginConflict: boolean, whether another conflicting Slider plugin like JUI slider exists on the same page. If set to true, the plugin will use a different namespace to prevent conflict. If you have the full jQuery UI assets loaded on the page you should set typically this to true. Defaults to false.

• 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"); }",
  ];
  

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"> </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'
    ],
]);

// Setting your own custom tooltips.
echo Slider::widget([
    'name'=>'rating_5',
    'value'=>3,
    'pluginOptions'=>[
        'min'=>0,
        'max'=>20,
        'step'=>1,
        'tooltip'=>'always',
        'formatter'=>new yii\web\JsExpression("function(val) { 
            if (val < 5) {
                return 'Poor';
            }
            if (val < 10) {
                return 'Fair';
            }
            if (val < 15) {
                return 'Good';
            }
            if (val <= 20) {
                return 'Excellent';
            }
        }")
    ]
]);

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