HTML 5 has a new input type named ‘range’ which creates what all would normally call a slider. This input type deals with numbers. The code below when viewed in Google Chrome or Safari 5 will produce the ‘slider’ effect, the javacript will get the value of the slider while it is being moved in either direction and as a bonus change the width of the div that has the new rounded CSS corners. Unfortunately, if you do not view the code in an HTML 5 compatible browser it will simply render a textbox. What you should see can be found below.
New HTML Range input item
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.roundedCornersExample{
border: #333333 solid 2px;
padding:5px;
width:400px;
display:block;
background-color:#D4E1F2;
border-bottom-right-radius:100px 100px;
border-bottom-left-radius:100px 100px;
border-top-left-radius:100px 100px;
border-top-right-radius:100px 100px;
}
</style>
<script type="text/javascript">
function changeCorners(t){
document.getElementById("results").innerHTML = t + "px";
document.getElementById("rce").style.width = t + "px"
//alert(t);
}
</script>
</head>
<body>
<div id="rce" class="roundedCornersExample" >
Input Type Range Example
</div>
<input name="range" onchange="changeCorners(this.value)" type='range' step='10' min='200' max='600' value='200' />
<div id="results" >0</div>
</body>
</html>
