How to create HTML5 input range

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

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>

Supported Browser

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

Code

View Demo

<!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>
2 comments

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*