jQuery Mobile Form Sliders
jQuery Mobile Slider Controls
A slider allows you to select a value from a range of numbers:
To create a slider, use <input type="range">:
Example
<form method="post" action="demoform.asp">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0"
max="100">
</form>
Try it yourself »Use the following attributes to specify restrictions:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - specifies the default value
Tip: If you want to show the value on the slider button, add data-show-value="true":
Tip: If you want to the value to pop up on your screen like a tooltip (as you slide), add data-popup-enabled="true":
Tip: If you want to highlight the track up to the slider value, add data-highlight="true":
Flip Toggle Switch
A flip switch is often used for on/off or true/false buttons:
To create a flip switch, use <input type="checkbox"> and specify a data-role of "flipswitch":
Example
<form method="post" action="demoform.asp">
<label for="switch">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Try it yourself »By default, the text on the flip switch is "On" and "Off". Use the data-on-text and data-off-text attributes to change this:
Example
<input type="checkbox" data-role="flipswitch" name="switch" id="switch"
data-on-text="True" data-off-text="False">
Try it yourself »Tip: Use the "checked" attribute to set one of the options to be pre-selected:
Example
<input type="checkbox" data-role="flipswitch" name="switch" id="switch"
checked>
Try it yourself »
More Examples
Range
slider
How to make a slider with two handles, allowing users to specify a minimum and maximum value
in a range.
Style Flip Switch
How to make the flip switch wider.
