Synonyms: Analog form element, range slider, range control
See also: Spin button, radio buttons, drop-down list, scrollbar, separator, progress bar
A slider is used to select a value from a continuous range of values (see DIN EN ISO 9241-161: 8.2). Sliders are mainly used for numerical values.
A slider consists of a bar that represents the entire range of values and a drag point which displays the selected value and through which the value is changed. Sliders can also feature an unlabeled or labeled scale of values on the bar. A slider can be aligned vertically or horizontally.
Presentation
Permalink "Presentation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 741 | Contrast | The bars of the slider must have a contrast ratio of at least 3:1 with respect to the background. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 742 | Contrast | The drag point of the slider must have a contrast ratio of at least 3:1 with respect to the background. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 743 | Contrast | If the drag point is only located within the bar, each must have a contrast ratio of at least 3:1 with respect to each other. Note: The contrast ratio of the drag point and the bar can also be maintained with a corresponding border around the drag point. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 744 | Contrast | All the text elements of the slider (e.g. display of current and possible values) must have a contrast ratio of at least 4.5:1. | Must | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 745 | Label | The slider must have a visible label (see Label). Note: If the purpose of the slider is clear from the visual context, the labeling can be omitted. This applies to sliders that are used for time control of videos. | Must | EN 301 549 9.3.3.2, 11.3.3.2 |
| 746 | Focus visibility | If the slider receives the keyboard focus, the focus indicator must be visible (see Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 |
| 747 | Value | The current value of the slider should be visually perceptible in text form. | Should | DIN EN ISO 9241-161: 8.2.2 |
Operation
Permalink "Operation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 748 | Use of the keyboard | It must be possible to access, operate and exit the slider with the keyboard (see Use of the keyboard table, below). | Must | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
| 749 | Use of the pointing device | The use of the pointing device to operate the slider must not be complex, i.e. if the value change of the slider is only possible by dragging the drag point, the value change must also be possible if the pointing device is no longer on the bar. Note 1: Complex use of the pointing device means
Note 2: The slider can be combined with an input field or spin button to provide an alternative method of value selection which does not require the complex use of the pointing device. In this case, the current value of both form elements must be synchronized automatically. | Must | EN 301 549: 9.2.5.1, 11.2.5.1 |
| 750 | Use of the pointing device | It should also be possible to operate the slider without the dragging use of the pointing device. Note: This can be done enabling the value selection by clicking on the bar, for example. | Should | WCAG 2.2 |
| 751 | Updates | When focusing and operating the slider, no unexpected change of context may occur. | Must | EN 301 549: 9.3.2.1, 11.3.2.1, 9.3.2.2, 11.3.2.2 |
| 752 | Click area | The click area of the drag point of the slider should be at least 24 x 24 px (see Use of the pointing device). | Should | WCAG 2.2 |
| 753 | Click area | Sliders should only be used when it is not necessary to enter an exact value. Alternatively, the slider should be designed so that the individual selectable values have a spacing of at least 24 px. | Should | WCAG 2.2 |
Use of the keyboard: slider
Permalink "Use of the keyboard: slider"| Action | Key | Classification |
|---|---|---|
| Focusing of the slider | TAB | Required |
| Exiting the slider | TAB | Required |
| Operation of the slider (selection of the previous or following value) | DOWN/LEFT ARROW, UP/RIGHT ARROW Note: Two arrow keys should function in each direction regardless of the orientation, as the orientation is often not correctly perceptible with AT. | Required |
| Operation of the slider (selection of the first and last value) | POS1, END | Required |
| Operation of the slider (selection of a value before or after with a defined increment) | PAGE UP, PAGE DOWN Note: The increment depends on the amount of possible values. An increment of 10 for instance, would make sense with 100 values. | Recommended |
Use of the pointing device: slider
Permalink "Use of the pointing device: slider"| Action | Key | Classification |
|---|---|---|
| Value change | Dragging of the drag point (drag and drop) | Required |
| Value change | Left click on an area of the bar | Recommended |
Programming/interfaces
Permalink "Programming/interfaces"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 754 | Role | The role of the slider must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 755 | Value | The value of the slider must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7 |
| 756 | Desktop: Value range | The minimum and maximum value of the slider must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 11.5.2.7 |
| 757 | Status | The status of the slider must be communicated to the Accessibility API (see Element status). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 758 | Orientation | The orientation of the slider (vertical or horizontal) must be communicated to the Accessibility API. | Must | EN 301 549: 9.4.1.2, 11.4.1.2 |
| 759 | Name | The slider must have a concise and expressive Accessible Name. | Must | EN 301 549: EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8 |
| 760 | Name | If the slider has a description, it must be communicated as an Accessible Description. | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 761 | Operation | It must be possible to access, operate and exit the slider with assistive technology (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
| 762 | Update | Updates concerning the Accessible Name, value or status of the slider must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 |
| 763 | Desktop: Position | The size and position of the slider and the drag point must be communicated to the Accessibility API (see Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 |
Practical tip: sliders in Web applications
Permalink "Practical tip: sliders in Web applications"Screen reader output
Permalink "Screen reader output"- JAWS: [label] up down slider | left right slider [value] [instruction on operation with the arrow keys]
- NVDA: [label] slider [value]
- Windows Narrator: [label] slider at [value] current value [value] minimum value [minimum value] maximum value [maximum value]
HTML
Permalink "HTML"The slider should be implemented with the HTML element <input type=range>.
The initial value can be set with the value attribute.
The minimum and maximum values and increment are set with the min, max and step attributes. It should be noted that these values are imperceptible with many forms of assistive technology.
The label should be linked to the slider with the <label for=ID> element.
A slider can be marked as disabled (disabled), but not read-only (readonly) or as a required field (required).
It is not possible to set the orientation of the slider. Most browsers display the slider horizontally.
Further information: 4.10.5.1.13 Range state (type=range) - HTML Standard (whatwg.org)
ARIA
Permalink "ARIA"Please note: On mobile devices, an ARIA slider may not be operated with assistive technology, because no gesture commands for the operation of non-native sliders have been implemented.
If the slider is not implemented with the HTML element, it is also necessary to take account of the following:
- The role is communicated with
role=slider. - The current value must be specified with
aria-valuenow. - The minimum and maximum values can be specified with
aria-valueminandaria-valuemax. - The labeling can take place with
aria-labeloraria-labelledby. - The presentation of the slider should be verified in Windows High Contrast mode.
- The visible slider and the programmatically focused element should have the same position and size.
The ARIA slider differs from the HTML slider in the following ways:
- An increment cannot be specified.
- The orientation can be specified with
aria-orientation. Frequently, the orientation is not output by the assistive technology, so that the operation with all the arrow keys should be possible. aria-valuetextcan also be used to specify a value in text form which should be then output by the assistive technology instead of the value inaria-valuenow.- Sliders with multiple drag points can be implemented for the selection of a range of values, for example.
- The slider can be marked as read-only with
aria-readonly.
Further information: slider role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Slider Pattern | APG | WAI | W3C
Information about this article
You are welcome to send feedback by email about our handout!