Having fun with HTML5 — Range type input

Besides the much talked about video tag, HTML5 also intro­duced a cou­ple of new input types, one of which is a rather inter­est­ing range input type which basi­cal­ly trans­lates to a slid­er bar con­trol:

image

The range input type is cur­rent­ly sup­port­ed by the lat­est ver­sions of Safari, Chrome and Opera while oth­er browsers such as Fire­fox sim­ply treat the field as a textbox.

There are four avail­able attrib­ut­es – min, max, step and val­ue. min and max should be self explana­to­ry, step deter­mines the size of each increment/decrement and val­ue is the cur­rent val­ue of the slid­er and also deter­mines the place­ment of the slid­er when the ele­ment is loaded (if not spec­i­fied, the slid­er will appear at the cen­tre of the con­trol when it’s first loaded):

<input type="range" min="0" max="200" step="5"></input>

image

<input type="range" min="0" max="200" value="0" step="5"></input>

image

I talked about the new bor­der radius prop­er­ty being intro­duced in CSS3 in my pre­vi­ous blog post, and with a lit­tle JQuery I’ve put togeth­er a quick demo here of how a 400px by 400px square looks as the bor­der radius changes.

If you look at the source of the page you will see that I added a change­Bor­der javascript func­tion to han­dle the onchange event fired by the slid­er, which dynam­i­cal­ly updates the HTML con­tent of an inter­nal CSS class called myS­lid­er­BarStyles using the cur­rent val­ue of the slid­er con­trol:

<input id="mySliderBar" type="range" min="0" max="200" value="0" step="5"
       onchange="changeBorder(this.value)"></input>
…
<script type="text/javascript">
    function changeBorder(newValue) {
        var newRadius = newValue + "px";
        // set the html content of the label showing the current radius value
        $("#rangeValue").html(newRadius);
        // set the style with the new radius value
        $("#mySliderBarStyles").html(
            "#myDiv { -webkit-border-radius: " + newRadius + "; }"
        );
    }
</script>
…
<style type="text/css" id="mySliderBarStyles"></style>

References:

Dive Into HTML5