Latest web development tutorials
 

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":

Example

<input type="range" data-show-value="true">
Try it Yourself »

Tip: If you want to the value to pop up on your screen like a tooltip (as you slide), add data-popup-enabled="true":

Example

<input type="range" data-popup-enabled="true">
Try it Yourself »

Tip: If you want to highlight the track up to the slider value, add data-highlight="true":

Example

<input type="range" data-highlight="true">
Try it Yourself »

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.