Slider

A slider allows users to select a numeric value within a defined range by dragging a handle along a track. It is well suited for settings where the precise value matters less than the relative position, such as volume, brightness or price range.

Accessibility Features

type="range" provides the slider role, appearance and behaviour.
min, max and step attributes define the allowed range and increment.
Left Arrow and Right Arrow decrease and increase the value by one step.
The current value is displayed visibly next to the slider and updates as the user moves the handle.

Regular Slider

Example

Code Snippet

Multi-Thumb Slider

A multi-thumb slider uses two handles to define a range, such as a minimum and maximum price. The slider can be implemented using two visually overlapping <input type="range"> elements with dynamically updating min and max values.

A <fieldset> groups the two controls and <legend> provides a label for the group.
Both controls must have their own <label>.
Both controls must have a distinguishable keyboard focus indicator.