Building a Slider with input type=range

In this lesson you'll learn how to build a slider using input type=range, so you can implement a UI that lets someone pick a number intuitively. This is for people searching "HTML input range usage."

Using <input type="range"> lets you build a "slider" where dragging a handle selects a number. The min, max, and step attributes specify the range and increment.

The sample code builds a slider that can select from 0 to 100 in increments of 10, with min="0" max="100" step="10", and updates the display of an <output> tag with the oninput attribute every time the value changes. Try actually moving the slider and watch the number reflect in real time.

A common beginner stumbling block is how to customize the slider's appearance. The design of <input type="range"> varies significantly between browsers, and fine-tuning it requires browser-specific pseudo-elements like ::-webkit-slider-thumb.

This is a control that shines in situations where you want someone to pick a number intuitively — adjusting volume, or brightness in an image editor, for instance. Pairing it with an <output> tag to show the current value makes for a more usable UI.