Technical Library

HTML5 Slider

Slider UI elements enable users to set values by moving a scrubber to a position on atrack.

Slider UI elements can appear in two different forms:

Continuous	The scrubber moves smoothly along the track – any position represents a valid input.
Segmented	The scrubber snaps to fixed positions along the track.

Configuration

<div data-role="fieldcontain">
<label for="slider-1">Continuous slider:</label>
<input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<label for="slider-2">Continuous slider:</label>
<input type="range" name="slider-2" id="slider-2" value="0" min="-10" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider-3">Segmented slider:</label>
<input type="range" name="slider-3" id="slider-3" value="0" min="0" max="10" step="1" />
</div>
<div data-role="fieldcontain">
<label for="slider-4">Segmented slider (Negation):</label>
<input type="range" name="slider-4" id="slider-4" value="0" min="-10" max="10" step="2" />
</div>

Full code

<body>
<div data-role="page" data-theme="b">
<div data-role="header" class="ui-bar-a ui-header" role="banner">
<a id="backButton" href="/index.html" data-icon="arrow-l" data-theme="a">Back</a>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Form Elements</h1>
</div>
<div data-role="content">
<h2>Slider</h2>
<div data-role="fieldcontain">
<label for="slider-1">Continuous slider:</label>
<input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<label for="slider-2">Continuous slider:</label>
<input type="range" name="slider-2" id="slider-2" value="0" min="-10" max="10" />
</div>
<div data-role="fieldcontain">
<label for="slider-3">Segmented slider:</label>
<input type="range" name="slider-3" id="slider-3" value="0" min="0" max="10" step="1" />
</div>
<div data-role="fieldcontain">
<label for="slider-4">Segmented slider (Negation):</label>
<input type="range" name="slider-4" id="slider-4" value="0" min="-10" max="10" step="2" />
</div>
</div>
</div>
</body>