Input Type Range

Form input type range element (Slider control)

HTML5 gives us very useful slider control. Lets look at the syntax and how to use the slider control.

<input type="range" name="price" min="1" max="10" value="1" />

Here are the different attributes you can use with range input.

  • min: specify the minimum value allowed.
  • max: specify the maximum value allowed.
  • step: specify the value of the interval.
  • value: specify the default value of the slider.

You can use event onchange to track selected value.

<input type="range" max="10" min="1" name="quantity" value="1" onchange="alert('Selected value: '+ this.value);" />

Demo

Select the quantity of the product:

Check the browser compatibility for the input type color

http://caniuse.com/#feat=input-range

Published by

Mandar Badve

Microsoft web, cloud, mobile developer

Leave a Reply

Your email address will not be published. Required fields are marked *