On this page
Overview
A field among fields, with its label inside at the start, its value at the end and a fill that shows it.
Show code, LayerOpacity.tsx
Anatomy
As under the pointer, which shows the handle.
Slider
Field
Label
Fill
Handle
Value
Description
Show code, SliderAnatomy.tsx
Behaviour
At rest
Slider is a field, as tall as the fields and with their corners, so it sits in a form among them.
Under the pointer
When the pointer comes over the slider, a thin handle marks the value and faint ticks mark its steps.
- Pressing anywhere moves the value there, and dragging carries it along.
- On a touch screen they show only while the finger is down.
Past the ends
Dragged past either end, the value stays at the minimum or maximum, and the slider stretches a little toward the pointer.
- The further the pointer goes, the less it gives, up to a small limit.
- The label and the value keep their shape and size.
- Once let go, it eases back.
- A press, the keyboard and a disabled slider don't stretch it, nor does it stretch where reduced motion is preferred.
With the keyboard
Reached with the keyboard, the slider shows its focus ring and the handle at the value, faded where it passes under the text.
- The arrow keys move the value; the ticks stay hidden.
Saving
The value follows the pointer as it moves, and is reported once more when the pointer lets go or after a key. Save it then.
Show code, SaveOnRelease.tsx
Steps
A slider has a lowest and a highest value and a step between values.
Show code, SessionTimeout.tsx
Disabled
A disabled slider is dimmed: it can't be focused or moved, and forms leave it out.
- Its description says who sets the value.
Adapting to width
A slider fills its container.
- Where it is narrow, a long label is cut short with an ellipsis, and the value keeps its room.
Show code, NarrowSlider.tsx
Rules
Match the range and the step to the precision people need.
Use it when
- A value adjusted by eye in a known range, such as opacity, volume or zoom
- A value whose place in the range matters more than the exact number
Range and step
Offer only the values people need, such as 5 to 120 minutes in steps of 5. Single minutes over a whole day leave no value easy to reach.
Show the effect
Show the effect where people can see it as the value changes.
Labels
Show the value with its unit, such as 30 minutes; the same text is announced.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to and from the slider. |
| ←, →, ↓, ↑ | Moves a step, in the reading direction. |
| Page Up, Page Down, or Shift with an arrow | Moves a large step, a tenth of the range. |
| Home, End | Moves to the minimum or maximum. |