Slider

Overview

Sliders have a single handle that can be moved horizontally with the mouse or the touch screen.

Markup declaration

They are declared in the HTML markup as follows:

<input id="myslider" type="range" value="0" max="100" min="0" name="formvalue"&gt;

Additionally, the result of the selected value can be shown in an output-field like this:

<form onsubmit="return false" oninput="displayedAge.value = age.valueAsNumber"&gt;
  <input name="age" id="age" type="range" min="0" max="100" value="0"&gt;
  <output for="age" name="displayedAge"&gt;0</output&gt;
</form>

Using a slider with an output element looks like this:

Ubuntu HTML5 Sliders

Written on July 9, 2010