DEV Community

Mandar Badve
Mandar Badve

Posted on • Originally published at blog.mandarbadve.com on

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" />
Enter fullscreen mode Exit fullscreen mode

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);" />
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)