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.

Figure 50: Slider

Presentation

Permalink "Presentation"

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 |

No.PropertyDescriptionClassificationReference
741ContrastThe bars of the slider must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
742ContrastThe drag point of the slider must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
743ContrastIf 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.

MustEN 301 549: 9.1.4.11, 11.1.4.11
744ContrastAll 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.MustEN 301 549: 9.1.4.3, 11.1.4.3
745LabelThe slider must have a visible label (see

Operation

Permalink "Operation"

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 |

No.PropertyDescriptionClassificationReference
748Use of the keyboardIt must be possible to access, operate and exit the slider with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
749Use of the pointing deviceThe 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

  • multipoint operation (e.g. swiping with several fingers),
  • path-based operation (where the start and end points of the use of the pointing device are not just relevant, but at least one intermediate point is).

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.

MustEN 301 549: 9.2.5.1, 11.2.5.1
750Use of the pointing deviceIt 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.

ShouldWCAG 2.2
751UpdatesWhen focusing and operating the slider, no unexpected

Use of the keyboard: slider

Permalink "Use of the keyboard: slider"
ActionKeyClassification
Focusing of the sliderTABRequired
Exiting the sliderTABRequired
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, ENDRequired
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"
ActionKeyClassification
Value changeDragging of the drag point (drag and drop)Required
Value changeLeft click on an area of the barRecommended

Programming/interfaces

Permalink "Programming/interfaces"

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 |

No.PropertyDescriptionClassificationReference
754RoleThe role of the slider must be communicated to the Accessibility API (see

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 with [value] current value [value] lowest value [minimum value] highest 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-valuemin and aria-valuemax.
  • The labeling can take place with aria-label or aria-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-valuetext can also be used to specify a value in text form which should be then output by the assistive technology instead of the value in aria-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), Slider Pattern | APG | WAI | W3C

Information about this article

Date:
15.01.2024
License:
CC-BY-SA 4.0
Version:
1.0

You are welcome to send feedback by email about our handout!