Horizontal Multi-Thumb Slider Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

About This Example

Warning!

Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events. This is a new convention that may not be fully implemented by some assistive technologies. Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

The following example of the Multi-Thumb Slider Pattern demonstrates an input for setting a pair of values that represent a range. This example enables users to specify a price range for a hotel reservation by moving the two arrows (thumbs) that represent the minimum and maximum price.

Similar examples include:

Color Viewer Slider Example: Basic horizontal sliders that illustrate setting numeric values for a color picker.
Vertical Temperature 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.
Media Seek Slider Example: Horizontal slider that demonstrates using aria-valuetext to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.

Example

Hotel Price Range (in USD)

Accessibility Features

The display of the slider's current value remains adjacent to the thumb as the thumb is moved, so people with a small field of view (e.g., due to magnification) can easily see the value while focusing on the thumb as they move it.
To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.
To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content. For example, the color of the focus ring border is set to match the foreground color of high contrast mode text by specifying the CSS currentcolor value for the stroke property of the inline SVG rect element used to draw the focus ring border. To make the background of the rect match the high contrast background color, the fill-opacity attribute of the rect is set to zero. If specific colors were instead used to specify the stroke and fill properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.
Note: The SVG element needs to have the CSS forced-color-adjust property set to auto for the currentcolor value to be updated in high contrast mode. Some browsers do not use auto for the default value.

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 slider value multiple steps. In this slider, jumps ten steps.
`Page Down`	Decreases 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
`none`		`svg`	The use of the `none` role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.
`slider`		`g`	Identifies the `img` element as a slider. Set on the movable thumb because it is the operable element that receives focus and represents the slider value.
	`tabindex=0`	`g`	Includes the slider thumb in the page tab sequence.
	`aria-valuemax=NUMBER`	`g`	Specifies the maximum value of the slider.
	`aria-valuemin=NUMBER`	`g`	Specifies the minimum value of the slider.
	`aria-valuenow=NUMBER`	`g`	Indicates the current value of the slider.
	`aria-label=text`	`g`	A label identifying the purpose of the slider, e.g., Hotel Minimum Price.
	`aria-hidden=true`	`g`	Removes the SVG `g` element from the accessibility tree to prevent assistive technologies from presenting it as an image separate from the slider.

JavaScript and CSS Source Code

CSS: slider-multithumb.css
Javascript: slider-multithumb.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.