jQuery Mobile - SPLessons

jQuery Mobile Form Slider

Chapter 19

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile Form Slider

jQuery Mobile Form Slider

shape Introduction

The chapter “jQuery Mobile Form Slider” explains about slider and toggle switch. Slider is the one which moves over values to select an appropriate value and toggle switch can vary between on/off which are mostly used in switches.

Slider

shape Description

To select a value from a number range “Slider” is used which is created using <input type="range">.

Example:

<label for="volume1">volume1:</label>
<input type="range" name="volume1" id="volume1" value="50" min="0" max="100">

Use the following attributes to specify restrictions.

Any value on slider button is made visible by adding data-show-value="true".

Example:

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

To popup a value on the screen while sliding, add data-popup-enabled="true".

Example:

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

In order to highlight the track up to the slider value, add data-highlight="true".

Example:

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

Flip Toggle Switch

shape Description

A flip toggle switch is mostly used for true/false or on/off buttons.The flip switch is created using <input type="checkbox"> and then specifying the attribute data-role="flipswitch".

Example:

<label for="switch1" toggle="" switch="" checkbox:<="" label="">
<input type="checkbox" data-role="flipswitch" name="switch1" id="switch1">

The text on the flip switch by default will be “On” and “Off”. To on/off the switch, use the attributes data-on-text and data-off-text.

Example:

<label for="switch2">Toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="switch2" id="switch2" data-on-text="True" data-off-text="False">

The attribute "checked" to set one of the options selected by default.

Example:

<label for="switch3">Toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="switch3" id="switch3" checked>

Sliders will do react to the keyboard shortcuts. To increase the current value the Right Arrow, Up Arrow, and Page Up keys can be used. To decrease the current value the Left Arrow, Down Arrow, and Page Down keys can be used. To move the slider to its minimum or maximum value use the Home and End keys respectively.

shape Example

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Form</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />

		<!-- jQuery CDN hosted files -->
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>  
	</head> 
	
	<body> 
	
	<form method="post" action="form1.asp">
	
		<label for="volume1">Volume1:</label>
		<input type="range" name="volume1" id="volume1" value="50" min="0" max="100" >
	   
		<label for="volume2">Volume2:</label>
		<input type="range" data-show-value="true" name="volume2" id="volume2" value="50" min="0" max="100" >
		
		<label for="points">Volume3:</label>
		<input type="range" data-popup-enabled="true" name="volume3" id="volume3" value="50" min="0" max="100" >
		
		<label for="points">Volume4:</label>
		<input type="range" data-highlight="true" name="volume4" id="volume4" value="50" min="0" max="100" >
		
		<label for="switch1">Toggle switch checkbox:</label>
		<input type="checkbox" data-role="flipswitch" name="switch1" id="switch1">
		
		<label for="switch2">Toggle switch checkbox:</label>
		<input type="checkbox" data-role="flipswitch" name="switch2" id="switch2" data-on-text="True" data-off-text="False">
		
		<label for="switch3">Toggle switch checkbox:</label>
		<input type="checkbox" data-role="flipswitch" name="switch3" id="switch3" checked>
	</form>

	</body>
</html>

Output:

Summary

shape Key Points

  • <input type=”range”> is used to create a slider.
  • A flip toggle switch is mostly used for true/false or on/off buttons.