Horizontal Multi-Thumb Slider Example

WARNING! Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events. This is a new convention that may not be fully implemented by some assistive technologies. Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

The following example of the multi-thumb slider design pattern demonstrates an input for setting a pair of values that represent a range. This example enables users to specify a price range for a hotel reservation by moving the two arrows (thumbs) that represent the minimum and maximum price.

Similar examples include:


Hotel Price Range (in USD)

0 0

접근성 특성

키보드 지원

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, Tabindex 어트리뷰트

Role Attribute Element Usage
none svg The use of the none role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.
slider g
  • 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 g Includes the slider thumb in the page tab sequence.
aria-valuemax=NUMBER g Specifies the maximum value of the slider.
aria-valuemin=NUMBER g Specifies the minimum value of the slider.
aria-valuenow=NUMBER g Indicates the current value of the slider.
aria-label=text g A label identifying the purpose of the slider, e.g., Hotel Minimum Price.
aria-hidden=true g Removes the SVG g element from the accessibility tree to prevent assistive technologies from presenting it as an image separate from the slider.

Javascript and CSS Source Code

HTML Source Code