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.

Kickstart Your Career

Get certified by completing the course

Get Started