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 (very useful to show the min and max ranges, and the slider measurement unit).
- 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.
Note: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets.
The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the
minimum-stability settings for your application's composer.json.
To install, either run
$ php composer.phar require kartik-v/yii2-widget-rangeinput "@dev"
require section of your
Latest Release ¶
Note: The latest version of the module is v1.0.0 released on 08-Nov-2014. Refer the CHANGE LOG for details.
You can refer detailed documentation and demos on usage of the extension.
use kartik\range\RangeInput; // Usage with ActiveForm and model echo $form->field($model, 'rating')->widget(RangeInput::classname(), [ 'options' => ['placeholder' => 'Select range ...'], 'html5Options' => ['min'=>0, 'max'=>1, 'step'=>1], 'addon' => ['append'=>['content'=>'star']] ]); // With model & without ActiveForm echo '<label class="control-label">Adjust Contrast</label>'; echo RangeInput::widget([ 'model' => $model, 'attribute' => 'contrast', 'addon' => ['append'=>['content'=>'%']] ]);
yii2-widget-rangeinput is released under the BSD 3-Clause License. See the bundled
LICENSE.md for details.
- Report any issues on the project page
- Use the forum page for any discussions on this extension
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.