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

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>