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

This post was originally published on blog.mandarbadve.com