Search within TutorialsPark

jQuery Mobile : Sliders Widget


Learn how to use jQuery Mobile Slider Widget


jQuery Mobile : Slider Widget

A Slider is used to select values by sliding the handle along a data track, to add a 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 - Slider Widget

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


jQuery Mobile : Slider with Step

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

Syntax: jQuery Mobile - Slider with Step

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


jQuery Mobile : Slider without Higlighting

A Default 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 Sliders without Highlighting

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


jQuery Mobile : Slider Minified Version

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

Syntax: jQuery Mobile Slider 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 Slider : 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 Slider Themes

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