Multi-thumb slider
A multi-thumb slider is a slider with multiple thumbs. It is used to select a range of values.
Multi-thumb slider
A multi-thumb slider should be used when the user needs to select a range of values.
As such it should have two thumbs. Each thumb should be implemented as a single-thumb
slider. Each thumb must have a role of slider.
Sliders accessibility labels
Each thumb must have an accessibility label as described in the accessible name requirements of a single-thumb slider. Additionally, the two thumbs of a multi-thumb slider must have unique accessible names. For instance if the multi-thumb slider allows the user to select a price range, the first thumb could have the accessible name "Minimum price" and the second thumb could have the accessible name "Maximum price".
Focus sequence
Each thumb must be in the keyboard focus sequence as described in
focus sequence requirements of a single-thumb slider.
Additionally, the focus order of the thumbs must be consistent. When focus is on the first thumb,
a Tab key press should move focus to the second thumb. When focus is on the second thumb,
a Shift + Tab key press should move focus to the first thumb. The focus order of the
thumbs should be the same as the order of the thumbs in the DOM and should not change
when the thumbs are moved.
Values
Each thumb must convey its minimum, maximum and current values as described in the value requirements of a single-thumb slider. Additionally, the minimum value of the second thumb must be greater than or equal to the current value of the first thumb. The maximum value of the first thumb must be less than or equal to the current value of the second thumb. These two conditions should ensure that the value of the first thumb is always less than or equal to the value of the second thumb.
Keyboard navigation
Each thumb must support the keyboard navigation described in the keyboard navigation requirements of a single-thumb slider.
ARIA owns
If the multi-thumb slider should contain sliders that cannot be implemented as descendants of the multi-thumb slider,
the aria-owns attribute can be used to indicate that the multi-thumb slider owns the sliders.
However, since the aria-owns attribute is not supported by some assistive technologies,
it is best practice to avoid it. If it must be used, the aria-owns attribute should be set
on the multi-thumb slider and should point to the IDs of the owned sliders.
Any elements referenced by the aria-owns attribute should have a role of slider.