Horizontal Multi-Thumb Slider Example

Important Note About Use of This Example

Note: 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-AT project plans to provide measurements of this example's assistive technology support by the end of 2020.
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.

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

HTML Source Code

<h3>
  Hotel Price Range
</h3>
<div class="aria-widget-slider">
  <div class="rail-label min">
    0
  </div>
  <div class="rail" style="width: 300px;">
    <img id="minPriceHotel"
         src="images/min-arrow.png"
         role="slider"
         tabindex="0"
         class="min thumb"
         aria-valuemin="0"
         aria-valuenow="100"
         aria-valuetext="$100"
         aria-valuemax="400"
         aria-label="Hotel Minimum Price">
    <img id="maxPriceHotel"
         src="images/max-arrow.png"
         role="slider"
         tabindex="0"
         class="max thumb"
         aria-valuemin="0"
         aria-valuenow="250"
         aria-valuetext="$250"
         aria-valuemax="400"
         aria-label="Hotel Maximum Price">
  </div>
  <div class="rail-label max">
    0
  </div>
</div>
<h3>
  Flight Price Range
</h3>
<div class="aria-widget-slider">
  <div class="rail-label min">
    0
  </div>
  <div class="rail" style="width: 300px;">
    <img src="images/min-arrow.png"
         role="slider"
         tabindex="0"
         class="min thumb"
         aria-valuemin="0"
         aria-valuenow="100"
         aria-valuetext="$100"
         aria-valuemax="250"
         aria-label="Flight Minimum Price">
    <img src="images/max-arrow.png"
         role="slider"
         tabindex="0"
         class="max thumb"
         aria-valuemin="0"
         aria-valuenow="250"
         aria-valuetext="$250"
         aria-valuemax="1000"
         aria-label="Flight Maximum Price">
  </div>
  <div class="rail-label max">
    0
  </div>
</div>