jQuery Mobile Form Slider
jQuery Mobile Slider Control
The slider allows you to select a value from a range of numbers:
To create a slider, use <input type="range">:
Example
<label for="points">Progress:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Try it Yourself »
Use the following attributes to specify limits:
- max - Specifies the maximum allowed value
- min - Specifies the minimum allowed value
- step - Specifies the legal number intervals
- value - Specifies the default value
Tip:If you want to display the progress value on the button, you can add the data-show-value="true" attribute:
Tip:If you want to display the progress on the slider button (like a small popup), you can use the data-popup-enabled="true" attribute:
Tip:If you want to highlight the value of the slider, add data-highlight="true":
Flip Toggle Switch
Flip toggle switches are commonly used for on/off or true/false buttons:
We can use an <input type="checkbox"> element and specify data-role as "flipswitch" to create a toggle switch:
Example
<label for="switch">Toggle Switch:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Try it Yourself »
By default, the toggle switch text is "On" and "Off". You can modify it using the data-on-text and data-off-text attributes:
Example
Try it Yourself »
Tip:The toggle checkbox can use the "checked" attribute to set the default option:
Example
Try it Yourself »
More Examples
Range Slider
Create a slider with a range of values.
Slider Styling
Set styles for the slider toggle switch.