After covering a basic ARIA slider as well as a more complex slider component, we will take a closer look at how a slider can be used to create a more obscure but very powerful widget: the double slider (or ‘range slider’). We will discuss what to think about when creating a double slider, and what changes to make to your slider’s ARIA properties.
A double slider allows the user select a range of values by specifying a minimum and maximum value, using two thumbs instead of one. For example, a double slider can be used to set a price range when searching for products, or a time window when searching for available flights.
Example
The TPGi slider component mentioned in my previous article also allows for the creation of double sliders. The double slider example page shows a few samples. At the end of the article I will describe how to create a double slider using this component.
What to Think About When Creating a Double Slider
Focus and Keyboard Support
Although a double slider may look like a single widget visually, it behaves as two individual sliders conceptually as well as programatically. In order to be keyboard accessible, each individual thumb must be focusable and part of the tab order. As the WAI-ARIA Authoring Practices 1.0 tells us, each thumb has the same interface as a single slider: arrow keys, page up/down and home/end keys are used to change the value.
Naming and Describing
Because non sighted users will perceive the double slider as separate widgets, you must make it clear for both thumbs that they are part of the same widget. The current recommendation is to add ‘range minimum’ and ‘range maximum’ in the thumb’s title. Since the TPGi slider already requires a label element for each thumb, I think it will suffice to include it in the label text as well.
If you want to be more verbose, you can also use the aria-describedby property to explain to the user that the thumb is part of a double slider. Don’t be too verbose though, as aria-describedby text is announced automatically by most screen readers on focus, and too much accessibility is seldom appreciated. A suitable description text would simply be: ‘part of range’.
Specifying Relationships
The thumbs of a double slider influence each other: the lower limit thumb move go past the upper limit thumb, and vice versa. In other words, the currently selected value of each thumb determines the limit of the other thumb. As developer, you must reflect this relationship in the sliders’ ARIA properties as well. First of all, to indicate the relationship between the thumbs you must give each of them an aria-controls property. This property takes the ID of the element that is being controlled as a value. In the case of a double slider, the thumbs control each other, so they would reference each other’s ID value. The simplified code snippet below illustrates this:
<div id="slider1" role="slider" aria-controls="slider2"></div>
<div id="slider2" role="slider" aria-controls="slider1"></div>
Note: This snippet only illustrates the use of the aria-controls property, and in no way reflects a complete or properly implemented slider.
As each thumb limits how far the other can be moved, you will have to dynamically update the other thumb’s limit in ARIA as well. You do this by changing the aria-valuemin and aria-valuemax properties:
For example. Let’s say your horizontal double slider starts off with a value range of 0 to 100. If we drag the right thumb to 50, it means that the left thumb now can’t get further than 49. In this example we would change the aria-valuemax property on the left slider to 49.
Mouse Input
The keyboard input may not be much different from single sliders, but mouse input is. Obviously, the thumbs can still be dragged using the mouse, but what should happen when the user clicks on the rail? Normally the thumb either moves to the location where the rail was clicked, or it moves an increment in that direction. In the case of a double slider, we have two thumbs and one rail, so you will have to decide on which thumb responds to what and how. The TPGi double slider is implemented in the following way (assuming a horizontal, left to right slider rail):
- Clicking to the left of the lower limit thumb will move it to where the user clicked.
- Clicking to the right of the upper limit thumb moves it to where the user clicked.
- Clicking in the middle of two thumbs moves both thumbs one increment closer to each other. Holding the CTRL key will move them a large increment (which is the same as using the page up or page down key).
This is not necessarily how it should be done, it is how I have implemented it for now. If anybody has suggestions I would love to hear them.
Using the TPGi Slider
To create a double slider using the TPGi slider, perform the following steps:
- Create two separate fallback elements (either a select or text input control) adjacent to each other. Create a separate label element for each, and have the label text specify whether the slider represents the lower or upper limit of the range.
- Wrap both controls in a div element, and give this a class name of tpgDoubleSlider. Any TPGi slider parameters can be specified in the div element’s class name as well. The exceptions are the tpg_labelledBy, tpg_defaultMin and tpg_defaultMax values, which must be specified for the individual controls.
Give it a try by downloading the source code (still under development).
Resources
Some similar double ARIA slider components:
The post ARIA Slider, Part 3 appeared first on TPGi.