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);" />


Select the quantity of the product:

Check the browser compatibility for the input type color