Latest web development tutorials

jQuery Mobile slider form

jQuery Mobile slider controls

Slider allows you to select a value from a range of numbers:


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

Examples

<form method="post" action="demoform.php">
  <label for="points">进度:</label>
  < input type="range" name="points" id="points" value="50" min="0" max="100">
</form>

try it"

Use the following attributes to specify restrictions:

  • max - the maximum allowed by regulations
  • min - the minimum allowed by regulations
  • step - specifies the legal number intervals for
  • value - the default value specified

Tip: If you want to display in the button can add the value of the progress of the data-show-value = "true " attribute:

Examples

<input type="range" data-show-value="true" >

try it"

Tip: If you want to show the progress on the slide button (similar to playing a small window) You can use the data-popup-enabled = "true " attribute:

Examples

<input type="range" data-popup-enabled="true" >

try it"

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

Examples

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

try it"

Toggle Switches

Fluctuations switch is normally used for on / off or true / false button:


We can use the <input type = "checkbox"> elements and specify the data-role to create the switch is "flipswitch":

Examples

<form method="post" action="demoform.php">
  <label for="switch">切换开关:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>

try it"

By default, the text switch to "On" and "Off". You can use the data-on-text and data-off-text Properties to modify it:

Examples

<input type = "checkbox" data -role = "flipswitch" name = "switch" id = "switch" data-on-text = "True" data-off-text = "False">

try it"

Tip: You can use the switch box "checked" attribute to set the default option:

Examples

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >

try it"

Examples

More examples

Interval slider
Make a slide interval values.

Slider Styles
Set the style to the slider switch.