jQuery Mobile Form Sliders

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Form Sliders

« Previous
Next Chapter »

## 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">
<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 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 highlight the track up to the slider value, add data-highlight="true":

## Example

<input type="range" data-hightlight="true">
Try it yourself »

## Toggle Switch

A toggle switch is often used for on/off or true/false buttons:

To create a switch, use the <select> element together 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: Use the "selected" attribute to set one of the options to be pre-selected (highlighted):

## Example

<option value="off" selected>Off</option>
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.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE