jQuery Mobile - Slider

Slider allows you to choose a numeric value from a range of value. The slider provides you a handle to slide and select a value.

The following table lists slider types used in jQuery Mobile −

Sr.No. Slider type & Description
1 Basic slider

To add a slider widget, use input with type = "range" attribute.
2 Step attribute

You can force the slider to snap to a specific increment by adding the step attribute to the <input>.
3 Highlight

To highlight the fill on the track upto the handle position of the slider, add data-highlight = "true" attribute.
4 Theme

To set the theme swatch for your slider, you can add data-theme attribute to the <input>.
5 Mini sized

For more compact version of slider you can use data-mini attribute in your <input>.
6 Disabled

You can disable the slider by using disabled attribute.
7 Label hidden

You can hide the label of the slider by adding the ui-hidden-accessible class to your <label>.
8 Fieldcontain
Adding ui-field-contain class to the div will ensure that the form will be rendered responsively.
9 Fieldcontain, mini sized

The ui-field-contain class can be added to mini slider in order to render it responsively.
10 Full width slider, no input

You can hide the number input and can make the slider full width using custom CSS.
11 Dynamically injected

The slider can be created at runtime by using the JavaScript function.
jquery_mobile_widgets.htm
Advertisements