jQuery Mobile - Range Slider Widget
Rangeslider widget provides you with a pair of handles allowing you to select a numeric value range.
The following table lists range slider types used in jQuery mobile −
Sr.No. | Rangeslider type & Description |
---|---|
1 | Basic rangeslider
You can use rangeslider widget by adding the data-role attribute and setting it to rangeslider. |
2 | Step attribute
You can force the slider to snap to a specific increment by adding the step attribute to the input. |
3 | No highlight
To have no highlight on the track up to the handle position of the slider, add the data-highlight attribute and set to false. |
4 | Theme
You can set the theme for your rangeslider by using data-track-theme and data-theme attribute. |
5 | Mini
For more compact version of rangeslider you can use data-mini attribute. |
6 | Disabled
You can disable the rangeslider by using disabled attribute. |
7 | Label hidden
You can hide the label of the rangeslider by adding the ui-hidden-accessible class to your label. |
8 | Fieldcontain
Adding ui-field-contain class to the div wrappers of form elements will ensure that the form is rendered responsively. |
9 | Fieldcontain, mini
The ui-field-contain class can be added to mini rangeslider in order to render it responsively. |