RangeInput 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 RangeInput::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set RangeInput::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 RangeInput::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 RangeInput::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-widget-rangeinput extension can be installed automatically or manually using one of these options:

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

"kartik-v/yii2-widget-rangeinput": "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-',
     ],
  ];
  

• orientation: string how the slider is to be oriented. Should be one of vertical or horizontal. Defaults to horizontal.

• width: string the width in 'px' or '%' of the HTML5 range picker input

• size: string the bootstrap SIZE modifier. One of 'lg', 'md', 'sm'

• html5Options: array the HTML attributes for the HTML5 range picker input

• options: array the HTML attributes for the caption input displaying the range value

• html5Container: array the HTML attributes for the container enclosing the range control and caption

• noSupport: string/boolean the message shown for unsupported browser. If set to false will not be displayed.

• noSupportOptions: array the HTML attributes for the message container displaying unsupported browser message

use kartik\range\RangeInput

// Usage with ActiveForm and model. Check the model validation (e.g. value > 5).
echo $form->field($model, 'rating')->widget(RangeInput::classname(), [
    'options' => ['placeholder' => 'Rate (0 - 5)...'],
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 5],
    'addon' => ['append' => ['content' => '<i class="fas fa-star"></i>']]
]);


// With a model and without ActiveForm
echo '<label class="control-label">Select Range</label>';
echo RangeInput::widget([
    'model' => $model, 
    'attribute' => 'rating_1',
    'options' => ['placeholder' => 'Rate (0 - 10)...'],
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 10],
    'addon' => ['append' => ['content' => 'star']]
]);

// Usage without a model and with an initial value
echo '<label class="control-label">Contrast</label>';
echo RangeInput::widget([
    'name' => 'range_1',
    'value' => 20,
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 100],
    'addon' => ['append' => ['content' => '%']]
]);

// A readonly rangeinput input and with an initial value
echo '<label class="control-label">Saturation</label>';
echo RangeInput::widget([
    'name' => 'range_2',
    'value' => 20,
    'options' => ['readonly' => true],
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 100],
    'addon' => ['append' => ['content' => '%']]
]);

// A disabled rangeinput input and with an initial value
echo '<label class="control-label">Hue</label>';
echo RangeInput::widget([
    'name' => 'range_3',
    'value' => 20,
    'options' => ['disabled' => true],
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 100, 'disabled' => true],
    'addon' => ['append' => ['content' => '%']]
]);

use kartik\range\RangeInput

// Control the size of the widget
echo '<label class="control-label">Adjust Saturation</label>';
echo RangeInput::widget([
    'name' => 'range_4',
    'value' => 34,
    'size' => 'lg',
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 100],
    'addon' => ['append' => ['content' => '%']]
]);


// Control the width of the range control, center the caption, and set default value
echo '<label class="control-label">Adjust Contrast</label>';
echo RangeInput::widget([
    'name' => 'range_4',
    'value' => 34,
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 100],
    'options' => ['placeholder' => 'Set...', 'class'=>'text-center'],
    'addon' => ['append' => ['content' => '%']]
]);

// Multiple input group addons (prepend, append, and precaption)
$preCap = <<< HTML
    <span class="input-group-addon">
        <span class="text-success">100%</span>
    </span>
    <span class="input-group-addon">
        <i class="fas fa-adjust"></i>
    </span>
HTML;
echo '<label class="control-label">Adjust Brightness</label>';
echo RangeInput::widget([
    'name' => 'range_5',
    'value' => 34,
    'html5Container' => ['style' => 'width:350px'],
    'html5Options' => ['min' => 0, 'max' => 100],
    'options' => ['placeholder' => 'Adjust...', 'class' => 'text-center'], 
    'addon' => [
        'prepend' => ['content'=>'<span class="text-danger">0%</span>'],
        'preCaption' => $preCap,
        'append' => ['content'=>'%']
    ]
    
]);

// Vertical range control orientation
echo '<div class="clearfix"></div>';
echo RangeInput::widget([
    'name' => 'range_6a',
    'value' => 20,
    'orientation' => 'vertical'
]);
echo RangeInput::widget([
    'name' => 'range_6b',
    'value' => 40,
    'orientation' => 'vertical'
]);
echo RangeInput::widget([
    'name' => 'range_6b',
    'value' => 60,
    'orientation' => 'vertical'
]);
echo RangeInput::widget([
    'name' => 'range_6c',
    'value' => 80,
    'orientation' => 'vertical'
]);
echo '<div class="clearfix"></div>';