Slider

Slider in Storybook

note

This component is being reworked. There will be a new version aligned with the latest guidelines in upcoming releases.

Overview

A slider is a control element that allows users to select from a value within a specified range. It provides a visual indication of adjustable content. Users move a handle horizontally along a track to control variables. The slider should be accompanied by a label and the minimum and maximum points in the value range.

Anatomy

Sliders have a track with the minimum and maximum values at each end.

The slider consists of:

1. Slider label: text that describes the purpose of the selection control, for example, "Volume" or "Screen brightness."
2. Handle: icon that the user can move to the desired point in the range of values.
3. Minimum value: the lowest value in the range that the user is required to select from.
4. Maximum value: the highest value in the range that the user is required to select from.
5. Track: horizontal line representing a range of values that users can select from.
6. Value label: text that displays the numeric value that corresponds to the placement of the handle.

Best practices

• Use a slider only when the precise value does not matter to the user, but rather only the approximate range.
• Make sure that the users can select that range correctly without having to struggle too much to hit a precise value.
• Use the input slider when users need to specify an approximate value between two specified values.
• Use sliders for a moderate value range and not extreme cases.
• Display any slider labels above or beside the slider, rather than below it, so that they remain visible while the user is selecting a value.

Interactions

The slider has three visual states, which serve to communicate the status:

• Enabled: When the element is enabled, it remains in its original state, indicating to the user that it is available for interaction.
• Disabled: In the disabled state, the element is greyed out, communicating to the user that the element is not interactive.
• Active: In the active state, the slider handle appears highlighted when users click it.

Users can select a numeric value by moving the slider handle with their mouse or using the ↑ ↓ ← → keys. In both cases, the value changes by increments of 1.

UX writing considerations

• Slider labels should appear in sentence case and without punctuation.
• Use the slider label to indicate what value the user is changing.
• For left-to-right languages (for example, languages written in Latin, Cyrillic, Modern Greek, Indic and Southeast Asian scripts), the minimum value appears on the left end of the track, and the maximum value is on the far right.
• For right-to-left languages (for example, languages written in Arabic and Hebrew scripts), the orientation of values is reversed.

Accessibility

The Jutro slider is an input where users select a value from a given range. It includes a slider thumb that can be moved along a track to change the value.

• Screen reader interaction: This component includes the WAI-ARIA role of "slider" and the aria-orientation attribute of 'horizontal' to communicate its purpose and orientation. The slider thumb and its label are associated via aria-labelledby. Similarly, the attributes of aria-valuemin, aria-valuemax and aria-valuenow are included to provide meaning to screen reader users. Changes in value are communicated by means of role='alert'.
• Keyboard interaction: The slider thumb is keyboard focusable. Values can be increased and decreased via the arrow keys.
• Color: The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.0 AA requirements.
• Zoom: All content is visible and functional up to & including a zoom factor of 200%.

This component has been validated to meet the WCAG 2.0 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance. Be sure to review the guidance as referenced in the WAI-ARIA Authoring Practices for Sliders.