Horizontal Multi-Thumb Slider Example

The below example section includes a slider for setting a price range that demonstrates the multi-thumb slider design pattern. Users set a price range by moving the arrows (thumbs). Each slider has two thumbs: one for the minimum price and one for the maximum price. The price labels at the ends of the slider update as their corresponding thumbs are moved.

Similar examples include:

Horizontal Slider Examples: Demonstrates using three horizontally aligned single-thumb sliders to make a color picker.
Slider Examples with aria-orientation and aria-valuetext: Three thermostat control single-thumb sliders that demonstrate using aria-orientation and aria-valuetext.

Example

Hotel Price Range

Flight Price Range

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
`slider`		`img`	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`	`img`	Includes the slider thumb in the page tab sequence.
	`aria-valuemax=NUMBER`	`img`	Specifies the maximum value of the slider.
	`aria-valuemin=NUMBER`	`img`	Specifies the minimum value of the slider.
	`aria-valuenow=NUMBER`	`img`	Indicates the current value of the slider.
	`aria-valuetext=DOLLAR AMOUNT`	`img`	Indicates the current value of the slider in dollars using the $ character as a prefix.
	`aria-label=text`	`img`	A label identifying the purpose of the slider, e.g., Hotel Minimum Price.

Javascript and CSS Source Code

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