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:

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




Example 11 | Developer's Blog

This div can be rounded by you!

Value:

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.
2 comments

Leave a Reply

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

*
*