Slider Examples with aria-orientation and aria-valuetext

The following example of a hypothetical online thermostat demonstrates the slider design pattern. The desired temperature is set with the first slider, which is vertically oriented. Two horizontal sliders set fan speed and mode. The horizontal sliders illustrate how to use aria-valuetext to provide assistive technologies with meaningful names for numeric values.

Similar examples include:

Example

Temperature
0
Fan
Off
Low
High
Auto
Heat/Cool
Off
Heat
Cool

Keyboard Support

Key Function
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 temperature slider value multiple steps. In this slider, jumps ten steps.
Page Down Decreases temperature slider value multiple steps. In this slider, jumps ten steps.
Home Sets slider to its minimum value.
End Sets slider to its maximum value.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
slider div
  • Identifies the element as a slider.
  • Set on the div that represents as the movable thumb because it is the operable element that represents the slider value.
tabindex=0 div Includes the slider thumb in the page tab sequence.
aria-orientation div
  • Indicates the orientation of the slider element.
  • Set to vertical for the temperature slider.
  • Set to horizontal for the fan and heat/cool controls.
aria-valuemax=NUMBER div Specifies a numeric value that is the maximum value the slider can have.
aria-valuemin=NUMBER div Specifies a numeric value that is the minimum value the slider can have.
aria-valuenow=NUMBER div A numeric value that is the current value of the slider.
aria-valuetext=STRING div
  • A string value that provides a user-friendly name for the current value of the slider.
  • For the temperature slider, is the value of the slider appended with the text degrees.
  • For fan and heat/cool, is the text representation of the current state, e.g., Off or Heat.
aria-labelledby=IDREF div Refers to the element containing the name of the slider.

Javascript and CSS Source Code

HTML Source Code