Overview
A slider sets a value whose position in a range matters more than its exact figure: a volume, a brightness, a price ceiling. People drag the thumb, activate a point of the track or press the arrow keys; the value can be shown next to the label. When the figure matters, a Number field is the better control, alone or next to the slider.
This page applies to every platform. Where a platform differs, the difference sits under a sub-heading named after it (Web, iOS, Android, Desktop); everything else holds everywhere.
When to use
- A continuous or stepped setting people adjust by feel: volume, brightness, zoom.
- A ceiling or a floor in a range (maximum price), with the value shown.
When not to use
- An exact number. Use a Number field.
- A range between two values. Two thumbs are not specified; use two Number fields.
- A choice among a few named options. Use a Radio group.
Sizes
| Size | Use for |
|---|---|
| Small | Inline in panels and toolbars: a 4 px track with a 16 px thumb. |
| Medium | Forms and settings, the default: an 8 px track with a 20 px thumb. |
The control stays 24 px high at both sizes, so the whole track is a pointer target.
States
| State | How it happens | What changes |
|---|---|---|
| Default | Resting. | A neutral track with the brand thumb at the value’s position. |
| Hover | A pointer rests over the control. Needs a pointing device: there is no hover on touch. | The thumb takes the brand hover color. |
| Active | The thumb is being dragged, or a key is held. | The thumb takes the brand press color. |
| Focus visible | Keyboard focus. | The shared focus ring appears around the whole track. Pointer focus shows no ring. |
| Disabled | disabled property. |
Track, thumb, label and value drop to the shared disabled colors. |
The track has no filled portion before the thumb: browsers do not all offer one without script. It is an open question.
Content
- The label names the quantity, with its unit when the value is shown: Volume, Maximum price (€).
- Show the value when the figure helps; hide it when the position says enough.
- Choose a step people can reason about: 1, 5, 10, 0.5.
Accessibility
The Specification tab lists the full accessibility contract, grouped into what holds on every platform and what is specific to one. Each statement there links the source it comes from. This section explains the decisions behind it.
- A value, not a drawing. The native slider exposes the slider role, the name, the value and its bounds, so assistive technology reports and changes the value as a number (WCAG 4.1.2 Name, Role, Value, WAI-ARIA: slider role, APG Slider pattern).
- A label, and the value when it helps. The label is associated with the control; a value shown next to it helps people choose (WCAG 3.3.2 Labels or Instructions, WCAG 1.3.1 Info and Relationships, WAI tutorial: Labeling controls).
- Never dragging only. People can activate a point of the track to move the thumb there, and the keyboard changes the value by steps; the keyboard alone would not satisfy the dragging criterion (WCAG 2.5.7 Dragging Movements, WCAG 2.1.1 Keyboard, APG keyboard interaction).
- Thumb and track are the boundary. The brand thumb keeps 3:1 against the track and the page in both modes, with a light rim to separate it from the track (WCAG 1.4.11 Non-text Contrast). Label and value are text (WCAG 1.4.3 Contrast (Minimum)); the position, not the color, shows the value (WCAG 1.4.1 Use of Color).
- Visible focus and target size. The ring is drawn around the whole track, so it is seen whatever the thumb position; the control is 24 px high at every size (WCAG 2.4.7 Focus Visible, WCAG 2.4.13 Focus Appearance, WCAG 2.5.8 Target Size (Minimum)).
- Motion. The thumb’s color transition is dropped under reduced motion (WCAG 2.3.3 Animation from Interactions).
Web
- The implementation renders an
<input type="range">withmin,maxandstep, a<label for>and, when shown, an<output for>holding the value; without script the output shows the initial value. It never setsaria-valueminoraria-valuemax(ARIA in HTML: input type=range, HTML-AAM: input type=range, HTML: the Range state, HTML: the output element). - When the number is not meaningful by itself, pass
aria-valuetextthrough the template’s extra attributes (WAI-ARIA: aria-valuetext). - The thumb is styled through the vendor pseudo-elements, one rule per vendor
(MDN: ::-webkit-slider-thumb,
MDN: ::-moz-range-thumb);
the focus ring uses
:focus-visible(MDN: :focus-visible).
iOS
- A slider is a horizontal track with a thumb that people adjust between a minimum and a maximum; consider a label to introduce it and live feedback as the value changes (Apple HIG: Sliders). The 24 pt control falls under the 44 by 44 pt hit region today (Apple HIG: Accessibility, mobility).
Android
- Material’s Slider enforces the 48 dp target; a custom slider exposes its value, range and step with the progress range semantics (Android accessibility: use large, simple controls, Jetpack Compose: minimum touch target sizes, Jetpack Compose: progress tracking).
Related
- Number field (an exact number)
- Progress bar (a value shown, not set)