Slider

A slider lets users select a value from a continuous or discrete range by dragging a thumb or using the keyboard, with accessible labels and live value announcements.

Demo

Click or tap the slider thumb and drag it left or right to change the value. You can also click the track to jump to a position. With keyboard focus on the thumb, use the Arrow keys to increment or decrement the value one step at a time, and Home / End to jump to the minimum or maximum.

What to Observe

• The current value is displayed alongside the slider and updates in real time as the thumb moves.
• A screen reader announces the slider's label, current value, and the full range when focus lands on the thumb.
• Arrow key presses move the thumb by a defined step and the updated value is announced without requiring manual interaction.
• The slider label is persistently visible — it does not disappear or rely on a placeholder inside the track.
• Focus styling on the thumb is clearly visible against any background color used in the component.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Label: A visible text label that identifies what the slider controls, associated with the input through a for/id relationship or aria-labelledby.
2. Track: The horizontal or vertical bar that represents the full range of possible values.
3. Thumb: The draggable handle that the user moves to select a value; it carries the ARIA role and value attributes.
4. Value display: A text output showing the currently selected value, updated live as the thumb moves.
5. Range indicators: Optional min and max labels at the ends of the track that give users context for the scale.

Accessibility Behavior

• The thumb must have a programmatic label so screen readers can announce what the slider controls.
• The current value, minimum, maximum, and step size must all be communicated to assistive technology.
• Arrow keys must change the value by the defined step amount; Home and End must jump to the minimum and maximum.
• The current value must be announced by a screen reader whenever it changes via keyboard or pointer interaction.
• The slider must be fully operable by keyboard alone — mouse interaction must not be the only way to change the value.
• Focus indication on the thumb must meet minimum contrast and size requirements so all users can see where focus is.

Common Mistakes

• Building the slider as a custom drag surface without the correct ARIA role, leaving it invisible to screen readers.
• Omitting or hiding the label so users have no context for what value they are adjusting.
• Not wiring up keyboard support, making the component unusable without a mouse or touch device.
• Failing to update the live value announcement, so screen reader users must tab away and back to hear the new value.
• Setting step sizes so small that keyboard navigation becomes impractical across a wide range.

Why This Matters

Sliders are common in settings panels, media players, and data filters — contexts where users with motor disabilities, tremors, or visual impairments are just as likely to need control over values. A slider built only for mouse or touch dragging is completely inaccessible to keyboard users and provides no meaningful feedback to screen reader users about what they are adjusting or what value they have reached. Implementing the correct ARIA attributes and keyboard handlers transforms a frustrating barrier into a fully usable control for everyone.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code