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. + 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:
-
@@ -40,9 +44,7 @@
- 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.
+ - Set on the the movable thumb because it is the operable element that receives focus and represents the slider value.
Horizontal Multi-Thumb Slider Example
Example
Hotel Price Range
- -Flight Price Range
- -Role, Property, State, and Tabindex Attributes
Role, Property, State, and Tabindex Attributes
aria-valuemax=270
+ aria-valuemax=NUMBER
div
@@ -204,7 +203,7 @@ Role, Property, State, and Tabindex Attributes
aria-valuemin=0
+ aria-valuemin=NUMBER
div
@@ -239,11 +238,12 @@ Role, Property, State, and Tabindex Attributes
div
Hotel Minimum Price.