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:
<input type="range" onchange="changeRounded(event)" value="0" max="50" min="0" id="rounded-border">Code language: HTML, XML (xml)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.
<script>
function changeRounded() {
var el = document.getElementById('rounded-example');
var borderVal = document.getElementById('rounded-border').value;
/* This is no need but its cool to see how much we slide */
document.getElementById('rounded-border-value').innerHTML = borderVal;
el.style.borderRadius = borderVal + 'px';
}
</script>Code language: HTML, XML (xml)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{
border-radius: 5px;
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>Code language: HTML, XML (xml)
You can edit the css of the range input, using `input[type=”range”]::-webkit-slider-thumb` and `input[type=”range”]`
Here is the example of it,
http://webstutorial.com/range-input-slider-html5-css3/html-5
Nice share,
Awesome work. Keep on your good work !