How to make a range slider

Short answer

A type="range" field draws a slider. min and max set the bounds, step sets the step:

<label>
  Volume
  <input type="range" min="0" max="100" step="5" value="40">
</label>

Showing the value

The slider itself does not show a number. Print it into <output> — it takes one line of JavaScript:

<label>
  Price up to $<output id="price">50</output>
  <input type="range" min="10" max="200" step="10" value="50"
         oninput="price.value = this.value" style="display: block; width: 240px;">
</label>

Color and look

accent-color changes the color of the filled part and the thumb:

<input type="range" style="accent-color: seagreen; width: 240px;">

For a fully custom look, set appearance: none and style the track and the thumb with the ::-webkit-slider-thumb and ::-moz-range-thumb pseudo-elements. They are written as separate rules for different browsers, so start with accent-color — it is often enough.

Common mistake

A slider is offered to pick an exact value from a wide range — for example, a birth year from 1900 to 2025. Hitting the right number with a finger is nearly impossible, and from the keyboard it takes many arrow presses. A slider is good for approximate values: volume, brightness, a price "up to". For exact numbers use type="number".