Search within TutorialsPark

jQuery Mobile : RangeSlider Widget


Learn how to use jQuery Mobile Range Slider Widget


jQuery Mobile : Range Slider Widget

A Range Slider is a slider with selector handle at both ends, to add a range slider to a jQuery Mobile page use a <div> container with attribute type="range".

The attributes min and max are used to set the limits of the range slider values, the labels use the attribute for to associate with Input elements using ID values.

Example: jQuery Mobile - Range Slider Widget

Give it a TRY! » Note: The Values are updated automatically as the range sliders are moved.


jQuery Mobile : RangeSlider with Step

The jQuery Mobile rangeslider widget can be made to snap to a set increment, using the attribute step, the default step is 1.

Syntax: jQuery Mobile - RangeSlider with Step

Give it a TRY! » Note: The step size is 5, hence the smallest increment is atleast 5 units


jQuery Mobile : RangeSlider without Higlighting

A Default Range Slider highlights the selected range, i.e the values in between the two handles. But you have an option to turn off the highlighting using the attribute data-highlighting="false".

Syntax: jQuery Mobile RangeSliders without Highlighting

Give it a TRY! » Note:The default value of data-highlight="true", i,e the selected range is highlighted.


jQuery Mobile : RangeSlider Minified Version

In some conditions you may find the rangesliders occupying a lot of screen space, set the value of attribute data-mini="true" to create a slim and minified version of the RangeSlider.

Syntax: jQuery Mobile RangeSlider Minified Version

Give it a TRY! » Note:Use a Minified version if there are a lot of other important content within the screen.


jQuery Mobile RangeSlider : Themes

To Set the theme use of the Slider Track use the attribute data-track-theme and to set the theme of the handles use the attribute data-theme.

Syntax: jQuery Mobile RangeSlider Themes

Give it a TRY! » Note:You can get a theme with custom color scheme using ThemeRoller application.