theburningmonk.com

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­cally trans­lates to a slider bar control:

The range input type is cur­rently sup­ported by the lat­est ver­sions of Safari, Chrome and Opera while other browsers such as Fire­fox sim­ply treat the field as a textbox.

There are four avail­able attrib­utes – min, max, step and value. min and max should be self explana­tory, step deter­mines the size of each increment/decrement and value is the cur­rent value of the slider and also deter­mines the place­ment of the slider when the ele­ment is loaded (if not spec­i­fied, the slider 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>

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

I talked about the new bor­der radius prop­erty being intro­duced in CSS3 in my pre­vi­ous blog post, and with a lit­tle JQuery I’ve put together 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 slider, which dynam­i­cally updates the HTML con­tent of an inter­nal CSS class called myS­lid­er­BarStyles using the cur­rent value of the slider control:

<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>

Ref­er­ences:

Dive Into HTML5