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.

Summary of Tests

NameConformance LevelWCAG Success Criteria
Multi-thumb sliderA4.1.2 Name, Role, Value, 1.3.1 Info and Relationships
Sliders accessibility labelsA4.1.2 Name, Role, Value, 1.3.1 Info and Relationships
Focus sequenceA2.1.1 Keyboard, 2.4.3 Focus Order, 1.3.1 Info and Relationships
ValuesA4.1.2 Name, Role, Value, 1.3.1 Info and Relationships
Keyboard navigationA2.1.1 Keyboard