jQuery Mobile Form Slider
jQuery Mobile Slider Control
Sliders allow you to select a value from a range of numbers:
To create a slider, use <input type="range">:
Example <input type="range" name="points" id="points" value="50" min="0" max="100">
Use the following attributes to specify restrictions:
- max - Specifies the maximum allowable value
- min - Specifies the minimum allowable value
- step - Specifies the legal number intervals
- value - Specifies the default value
Tip: If you want to display the progress value in the button, you can add the data-show-value="true" attribute:
Example <input type="range" data-show-value="true">
Tip: If you want to display progress on the slider button (similar to a small popup), you can use the data-popup-enabled="true" attribute:
Example <input type="range" data-popup-enabled="true">
Tip: If you want to highlight the value of the slider, add the data-highlight="true" attribute:
Example <input type="range" data-highlight="true">
Toggle Switch
Toggle switches are typically used for on/off or true/false buttons:
We can create a switch using the <input type="checkbox"> element and specifying data-role as "flipswitch":
Example
By default, the switch toggle text is "On" and "Off". You can modify it using the data-on-text and data-off-text attributes:
Example
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">
Tip: The switch checkbox can use the "checked" attribute to set the default option: