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.
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.
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:-
| Browsers | Render 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