HTML: input type="range"

A range input lets users choose a numeric value by moving a slider between a minimum and maximum.

What you will learn

How to set a range with min, max, and step
How to label the slider and communicate its current value
When a number input is easier to use

Minimal example

<label for="volume">Volume: <output id="volume-value">50</output></label>
<input id="volume" name="volume" type="range"
       min="0" max="100" step="1" value="50">

Use a label to explain the meaning and units. If the exact value matters, show it in an associated output and update it when the slider changes.

Common mistakes

Do not rely on the slider position alone to communicate the exact value.
Choose a suitable step; an overly fine range can be difficult to operate.
Use a number input when typing an exact value is more important than choosing approximately.