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

2 Responses to “How to create HTML5 input range”

  1. Prashant March 4, 2012 at 8:00 am #

    Awesome work. Keep on your good work !

  2. Rex April 4, 2012 at 7:33 pm #

    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,

Leave a Reply

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