HTML5 Tutorial - Input Type : Range

Input Type : Range

Slider control is a very intuitive user interface to set a number within a range. A typical Slider usually can be found in color picker where we can drag the arrow left and right to pick the right RGB value.

typical slider

In order to create a Slider in a web page, we used to choose between javascript or flash as our solution. HTML5 is here to save thousands of bytes in your code. With the new input type (<input type="range">), Slider control will be native as Dropdown List (<select>)

The code can be as simple as :-

<input id="test" type="range"/>

As usual, the designer behind each web browser has their own taste in rendering user interface. Again, I would like to show you the gallery of Sliders in various browsers running in Windows.

Slider Gallery

Browsers do not render <input type="range"> as slider will simply render it as a normal textbox (<input type="text">).

As of writing, web browsers that render <input type="range"> as slider as follows:-

BrowsersRender Range input as Slider
IE 10
Firefox 13
Safari 5
Chrome 8
Opera 11

Let's look at the demo of a slider. Well, I admit it is not sexy at all.

The Range type input has a few interesting attributes which you may want to learn.

Attribute Descriptions
value Value is a common attribute of "Input" element. The value can be any valid floating point number, not neccessary must be an integer number. Default value is minimum value plus half of the maximum value.
min Minimum value of the range. Default minimum value is 0.
max Maximum value of the range. Default maximum value is 100.
step This is Step scale factor of the slider, default value is 1 and only allowing integer number unless minimum value is non integer number.
list List is the DataList in the past lesson. Datalist can be incorporated into Range type input, however, none of the browser has implemented this feature as of writing.

It is always easier to understand with some hands on demos.

Demo 1. Let's specify minimum value, maximum value and step factor.

<input id="slider1" type="range" min="100" max="500" step="10" />

Minimum = 100, Maximum = 500, Step = 10

Demo 2. Set default value.

<input id="slider2" type ="range" min ="100" max="500" step ="50" value ="100"/>

Minimum = -300, Maximum = 300, Step = 50, Value = 100

Demo 3. Let's see how it works in floating number.

<input id="slider3" type ="range" min ="-2.5" max="3.0" step ="0.1"/>

Minimum = -2.5, Maximum = 3.0, Step = 0.1