← All patterns · Input widgets

Slider

Continuous-value control between minimum and maximum.

Pattern

A slider lets the user pick a value from a continuous range. Volume controls, brightness, price-range filters.

Roles

  • slider

States and properties

aria-valuenow
Current value.
aria-valuemin / aria-valuemax
Range bounds.
aria-valuetext
Human-readable text for the value (optional).
aria-orientation
horizontal (default) or vertical.

Keyboard interaction

Right / Up arrow
Increment by step.
Left / Down arrow
Decrement by step.
Page Up / Page Down
Increment / decrement by larger step.
Home / End
Min / max value.

WCAG criteria

  • 2.1.1 — Keyboard
  • 4.1.2 — Name, Role, Value

Canonical reference

WAI-ARIA Authoring Practices Guide — Slider

More