jQuery Mobile form slider
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile form slider
The jQuery Mobile form slider can be used to control progress.
jQuery Mobile slider control
The slider allows you to select a value from a range of numbers:
To create a slider, use the slt;input type to "range":
<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="points">Points:</label>
< input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</form>
<div data-role="fieldcontain">
<label for="points">Points:</label>
< input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</form>
Try it out . . .
Use the following properties to specify the limits:
- max - specifies the maximum allowed
- min - specifies the minimum allowed
- step - specifies a legal digital interval
- value - specifies the default value
Tip: If you want to highlight the value of the highlight slider, add data-highlight-"true":
Toss the switch
Volatility switches are commonly used for on/off or true/false buttons:
To create a switch, use the element with the data-role"slider" and add two elements:
<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider" >
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider" >
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>
Try it out . . .
Tip: Use the selected property to set one of the options to preselect (highlight state):
Now you can use the jQuery Mobile form slider you learned in this section to add effect to the form you created!