How to create HTML5 input range

22 July 2010 by Rick ~ 2 Comments 7956 views

HTML5

Today we will use HTML5 form to create a input range (slider) wich will modify the border-radius.

Input Range

First of all we need the form input type range:

Notice

The onchange function changeRounded(event).
Max and Min values
The id

Script

Now the little JavaScript part.

We get some values and we add the value.

Supported Browser

I test it without any issue in Opera 10, Google Chrome and Safari.

Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 11 | Developer's Blog</title>
<meta charset="utf-8">
<style>
#rounded-example{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#CCC;
padding:20px;
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
box-shadow: 5px 5px 5px #888;
-moz-box-shadow:5px 5px 5px #888;
-webkit-box-shadow:5px 5px 5px #888;
width:300px;

}
</style>

</head>

<body>

<div id="rounded-example">
This div can be rounded by you!<br><br>

Value: <span id="rounded-border-value"></span>
</div>

<p><input type="range" onchange="changeRounded(event)" value="0" max="50" min="0" id="rounded-border"></p>
<script>
function changeRounded() {
var el = document.getElementById('rounded-example');

var borderVal = document.getElementById('rounded-border').value;
document.getElementById('rounded-border-value').innerHTML = borderVal;

el.style.borderRadius = borderVal + 'px';
}

</script>

</body>

</html>