Slider Range

Custom Slider

Description Inner text describes slider purpose
Role Identifies itself as a a slider or range
Relationships n/a
State Expresses minimum value, maximum value, and current value
Focus Visibly focusable with tab key / swipe
Action arrow keys / swipe up / volume / page up/down, home, end

Keyboard & Screenreader Support

Tab / swipe Focus slider
Right Arrow Increases slider value one step.
Up Arrow Increases slider value one step.
Left Arrow Decreases slider value one step.
Down Arrow Decreases slider value one step.
Page Up Increases slider value multiple steps.
Page Down Decreases slider value multiple steps.
Home Sets slider to its minimum value.
End Sets slider to its maximum value.
iOS swipe up / Android volume keys Increase/decrease slider value one step

Custom Element

  • While there is a native <input type="range">, it is very difficult to style reliably across browsers.
  • This is one of the exceedingly rare instances where a custom element makes a lot of sense.

Description

  • Identifies itself as a a slider or range

Role

  • Identifies itself as a a slider or range

Relationships

  • aria-labelledby="label-id" if using another element as a label

State

  • aria-valuemin,
  • aria-valuemax,
  • aria-valuenow

Focus

  • Visibly focusable with tab key / swipe

Actions

  • arrow keys / swipe up / volume / page up/ down
  • home
  • end