Horizontal Multi-Thumb Slider Example

Following is an example of a multi-thumb slider that demonstrates the slider (Multi-Thumb) design pattern. The example illustrates a typical price range selector found on travel websites. Change the desired price range by moving the arrows for the maximum and minumum price. The price labels on either end of the slider will update as you move the corresponding thumb.

Similar examples include:

Example

Hotel Price Range

0
0

Flight Price Range

0
0

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 div
  • Identifies the element as a slider.
  • Set on the div that represents as the movable thumb because it is the operable element that represents the slider value.
tabindex=0 div Includes the slider thumb in the page tab sequence.
aria-valuemax=270 div Specifies the maximum value of the slider.
aria-valuemin=0 div Specifies the minimum value of the slider.
aria-valuenow=NUMBER div Indicates the current value of the slider.
aria-valuetext=DOLLAR AMOUNT div Indicates the current value of the slider in dollars using the $ character as a prefix.
aria-label=text div A label identifying the function of the slider, in this case "Minimum Price" or "Maximum Price".

Javascript and CSS Source Code

HTML Source Code