jQuery Mobile Form - Slider

jQuery Mobile Slider Control

Sliders allow you to select a value from a range of numbers:

To create a slider, please use <input type="range">:

Example

<form method="post" action="demoform.asp">
  <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 Yourself

Use the following properties to define limits:

  • max - Defines the maximum allowed value
  • min - Defines the minimum allowed value
  • step - Defines the valid number interval
  • value - Defines the default value

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

Example

<input type="range" data-hightlight="true">

Try It Yourself

Toggle Switch

Toggle switches are commonly used for on/off or true/false buttons:

To create a toggle, please use the <select> element with data-role="slider" and add two <option> elements:

Example

<form method="post" action="demoform.asp">
  <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 Yourself

Tip:Hint: Use the "selected" attribute to set one of the options as pre-selected (highlighted):

Example

<option value="off" selected>Off</option>

Try It Yourself