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

Get certified by completing the course