Horizontal Multi-Thumb Slider Example

NOTE: Please provide feedback on this example page in issue 520.

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:

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 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

HTML Source Code