Skip to content

Slider

C-38 · Components · Editor (Office)

All elements · Slider on the Components page

Last checked 2026-10-22 · Awaiting approval · Accessibility tests

Copies the bun run a11y:approve command for Slider.

Slider

C-38 OfficeWCAG 2.2 AA · Passed

The zoom slider (a detent marks 100%), transparency and brightness: role="slider" with aria-valuetext. The value is a 0–1 fraction in --_value.

Axis / element Values
__track · __fill · __thumb · __detent parts
Zoom

Guidance

When to use

  • Use it for the zoom control in the status bar, with a detent at 100%.
  • Use it for transparency and brightness, where users adjust by eye.
  • Pair it with buttons or a field that set the exact value, as the zoom control does with Zoom out, Zoom in and the percent button.

When to consider something else

  • When users need to type an exact value with a unit, use a Spin button. See SpinButton.
  • When the value is task progress rather than user input, use Progress. See Progress.
  • When there are only a few fixed settings, use a Button group or a Select. See ButtonGroup.

Usability

Do
  • Set --_value as a 0 to 1 fraction so the fill and thumb match aria-valuenow.
  • Use __detent to mark a meaningful default, such as 100% zoom.
  • Give aria-valuetext the human value, such as "100%".
  • Offer a non-drag way to reach any value, such as steps, a field or a menu.
Don’t
  • Don't make dragging the only way to change the value (2.5.7 Dragging Movements).
  • Don't use it for values that need exact entry.
  • Don't hide the current value; show it next to the slider or in a linked button.

Accessibility

Keyboard

Slider keyboard
Keys Action
Tab Moves focus to the track; in the status bar it is one stop in the roving toolbar.
Arrow Right / Arrow Up The binding must increase the value by one step.
Arrow Left / Arrow Down The binding must decrease the value by one step.
Page Up / Page Down The binding should change the value by a large step.
Home / End The binding must set the minimum or maximum value.

Roles and names

  • __track has role="slider", an aria-label ("Zoom"), aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext.
  • __fill, __detent and __thumb are decorative parts with no role.
  • Inside a roving toolbar such as the status bar, the binding must let the slider keep Arrow Left and Arrow Right instead of moving focus to the next control.

Focus

  • The track shows the focus ring on :focus-visible.
  • Changing the value does not move focus.

Other requirements

  • The track is 1.5rem (24px) high, which meets 2.5.8.
  • The thumb and track are non-text graphics and need 3:1 against the bar (1.4.11); in forced colors they use CanvasText and ButtonText.
  • Zoom changes must not cause loss of content or function at 200% browser zoom (1.4.4).

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Slider test checklist
Area Automated A person checks
General Passed Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom Passed At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard Passed Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (5 rows)
Screen reader Passed With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (3 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- slider --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Slider package
Source css/classic/components/pickers.css
Specimens also use Box · Card · Chip · Table · Text · Toolbar
Sprites —
React Not yet available: the React binding has not started.

Latest updates

No recorded changes yet.

All release notes