Slider Preview

A slider lets someone set a value from a given range. Sliders can take immediate effect, like a volume control, or can require a submission, like in a form.

Use a slider for imprecise values. Don't use them for ranges that are very small or very large. For precise numerical inputs, like a dollar amount, try an input.




Slider default


Default sliders let someone choose any approximate value along an unmarked range, like brightness controls.

Slider step


Step sliders divide a track into discrete values, like screen resolutions settings, and will snap the thumb to the specific value closest to the where the track was selected.


Sliders can be manipulated by moving the thumb along the track, or by selecting a spot along the track that the thumb will jump to. All interactions are optimized for mouse, keyboard, and touch.

Thumb selection

Thumb selection

Track selection

Track selection


Sliders can be laid out vertically or horizontally.

Vertical alignment

Vertical alignment

Horizontal alignment

Horizontal alignment


Use sliders with a label, even if that label is hidden. It’s common to use a tooltip to label the current value of a slider. This information in the tooltip must be perceivable to people using screen readers.

Slider label


Slider labels should briefly describe what the range represents. Define the values at the min and max of the range. For non-numerical ranges, use parallel terminology, like min/max and high/low.

Content correct
Content incorrect