In this section, we will learn what HTML <input type = “range”> element is and how to use it.

Range Slider in HTML: What is input type range in HTML?

HTML <input type = “range”> element is used to produce a numeric value but with a slider controller.

Basically, browsers render an input of type range as a slider controller in a webpage. This slider then has a button that we can click and move left and right to produce a numeric value.

By default, the values that can be produced from a range element are from 0 to 100 with the step of one.

But with the help of min, max, and step attributes, we can change the minimum and maximum values as well as the interval steps, respectively.

HTML input type range Syntax:

<input type = “range”>

Example: using <input type=”range”> in HTML

See the Pen using <input type="range"> in HTML by Omid Dehghan (@odehghan) on CodePen.