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
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 LabelFocus indicator
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 change of contextUse of the pointing device

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
No.PropertyDescriptionClassificationReference
754RoleThe role of the slider must be communicated to the Accessibility API (see Accessibility APIElement statusFocus indicator

Practical tip: sliders in Web applications

Permalink "Practical tip: sliders in Web applications"
  • 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]

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)

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) (External Link), Slider Pattern | APG | WAI | W3C

Information about this article

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