HTML Range Examples with aria-orientation and aria-valuetext

The following example of a temperature range slider demonstrating the using aria-valuetext and aria-orientation on an input[type="range"] control. The desired temperature is set with the range control, which is vertically oriented. The range control illustrate how to use aria-valuetext to provide assistive technologies with meaningful names for numeric values.

Similar examples include:

Color Viewer Slider Example: Basic horizontal sliders that illustrate setting numeric values for a color picker.
Temperature Selector Slider Example: Demonstrates using aria-orientation to specify vertical orientation and aria-valuetext to communicate unit of measure for a temperature input.
Rating Slider Example: Horizontal slider that demonstrates using aria-valuetext to communicate current and maximum value of a rating input for a five star rating scale.
Horizontal Multi-Thumb Slider Example: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.

Example

Temperature

25.0°C

Accessibility Features

The accessible name for the temperature control is defined using the label element with the for attribute referencing the id of the range control.
A border around the thumb is used for indicating the range control with keyboard focus using browser specific CSS properties.
The width of the rail is increased to provide a larger target for changing the value using a pointing device.

Keyboard Support

Keyboard support for the temperature control is provided by the native browser support for the input[type="range"] element.

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 18 steps (e.g. 1.8°C) on most browsers.
`Page Down`	Decreases temperature slider value multiple steps. In this slider, jumps 18 steps (e.g. 1.8°C) on most browsers.
`Home`	Sets slider to its minimum value.
`End`	Sets slider to its maximum value.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
	`aria-valuetext`	`input[type="range"]`	A string value that provides a user-friendly name for the current value of the range. For the temperature range, is the value of the range appended with the text "°C".
	`aria-orientation="vertical"`	`input[type="range"]`	Indicates the orientation of the `input` element. Set to `vertical` for the temperature range control.

Javascript and CSS Source Code

CSS: range-temperature.css
Javascript: range-temperature.js