RangeInput Widget RangeInput.php

Thankful to Krajee!
to get more out of us.

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

The RangeInput widget is a customized range slider control widget based on HTML5 range input. The widget enhances the default HTML range input with various features including the following:

  • Specially styled for Bootstrap 3.0 with customizable caption showing the output of the control.
  • Ability to prepend and append addons.
  • Allow the input to be changed both via the control or the text box.
  • Automatically degrade to normal text input for unsupported Internet Explorer versions.

Important

This widget can be also installed in isolation outside this bundle if needed. In addition to using via \kartik\widgets namespace, this widget can be also installed from the yii2-widget-rangeinput repository and can also be accessed via \kartik\range\RangeInput namespace.

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the RangeInput widget configuration are:
  • 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

Usage with ActiveForm and model. Check the model validation (e.g. value > 5).
star
With a model and without ActiveForm
%
Usage without a model and with an initial value
%
A readonly rangeinput input and with an initial value
%
A disabled rangeinput input and with an initial value
use kartik\widgets\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)...'],
    'html5Options' => ['min' => 0, 'max' => 5],
    'addon' => ['append' => ['content' => '<i class="glyphicon glyphicon-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)...'],
    '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,
    '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],
    '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],
    'html5Options' => ['min' => 0, 'max' => 100, 'disabled' => true],
    'addon' => ['append' => ['content' => '%']]
]);

%
Control the size of the widget
%
Control the width of the range control, center the caption, and set default value
0%100%%
Multiple input group addons (prepend, append, and precaption)

Vertical range control orientation
use kartik\widgets\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',
    '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,
    'width' => '75%',
    '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="glyphicon glyphicon-adjust"></i>
    </span>
HTML;
echo '<label class="control-label">Adjust Brightness</label>';
echo RangeInput::widget([
    'name' => 'range_5',
    'value' => 34,
    'width' => '40%',
    '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>';