Using Range Input to create HTML sliders
The range element that has been introduced in HTML5 and that was missing in the previous versions can be used to create a variety of sliders. The syntax of this input type is:
|
1 |
<input type="range"> |
Various attributes can be received by this element, mot noteworthy being min, max, step and value etc. As a demonstration, a gauge is built using the range element in which first of all, we need to create the mark-up:
|
1 2 3 4 5 6 |
<form method="post"> <h1> Total Recall Awesomeness Gauge </h1> <input type="range" name="range" min="0" max="10" step="1" value=""> <output name="result"> </output> </form> |
In the above code, other than setting the min and max values, we can also mention what the step for each transition will be. If the step is set to 1, there will then be 10 values to choose. After that, we would use :before and :after to inform the user what our specified min and max values are. This is done using CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif; text-align: center; } input { font-size: 14px; font-weight: bold; } input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;} output { display: block; font-size: 5.5em; font-weight: bold; } |
Here, content is created before and after the range input and their values are made equal to min and max values respectively.
Finally comes the JavaScript part, in which we determine if the current browser knows what the range input is. If not, we alert the user that the demo won’t work. This part would also be used to update the output element dynamically, as the user moves the slider. The next time the user refreshes the page, the range and output will automatically be set to what they last selected:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
(function() { var f = document.forms[0], range = f['range'], result = f['result'], cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; var o = document.createElement('input'); o.type = 'range'; if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.'); range.value = cachedRangeValue; result.value = cachedRangeValue; range.addEventListener("mouseup", function() { alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser."); localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead."); }, false); range.addEventListener("change", function() { result.value = range.value; }, false); })(); |
This would pretty much sum up the entire coding of the slider. This feature can considerably enhance the ease and power of web programming and can be regarded as another exciting feature added in HTML5.
BlueHost | HostGator | Media Temple
