Slider

A slider trades precision for orientation. The track is the whole range drawn to scale, so the handle’s position answers where am I in this before it answers what number is this. That makes it right for brightness, volume, opacity, a price ceiling, a blur radius: values a person tunes by result rather than types from memory. When the exact figure is what matters, or the range runs to thousands of steps, a number field is the honest control, and the two are often paired so the slider does the coarse move and the field does the last digit.

The parts have names worth using. The track is the full range; the fill (also indicator or active track) is the part from the minimum to the current value; the thumb (also handle or knob) is what you drag. Ticks, or stops, mark the steps a discrete slider snaps to. A range slider carries two thumbs and produces a span rather than a value, which is a different control with its own problems: two handles that can collide, and no obvious way to move one past the other.

“Slider” is also the web’s most reliable false friend. In marketing and theme vocabulary it usually means a rotating banner of images, which is a carousel: nothing is being set, and there is no range. “Track bar” is the same control under its Windows Forms name. Two neighbors are worth keeping apart from it as well. A progress bar looks like a filled track but reports rather than accepts, and dragging it does nothing. A scrollbar also has a thumb on a track, yet its thumb has a size that reports how much of the content you can see, and it moves a viewport instead of setting a value.

Sliders are easy to build and easy to build badly. The handle needs a target large enough for a fingertip even when the track is a few pixels tall, the current value should be readable without dragging, and arrow keys must step it (role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow, or a native <input type="range">, which brings all of that for free). Give the value a unit in aria-valuetext when the raw number would be read out meaninglessly, and never make a slider the only way to reach a value that has to be exact.