Slider

Label

Sliders should always have a label. In rare cases where context is sufficient and the UX Team have reviewed the design, the label could be undefined. These sliders should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).

Label Position

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited.

Primary

By default, sliders are not emphasized. This option is best for when the slider is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content. The Primary, or emphasized, version provides a visual prominence that is best for forms, settings, lists or grids of assets, and other situations where a slider needs to be noticed.

Value Format

Sometimes a value needs to be formatted for localization or for clearer communication (e.g., currencies or percentages). Formatting can involve rounding, mathematical transformations, number formatting, or displaying a prefix or suffix (e.g., “+/-” or “px”).

Width

The width of a slider can be customized appropriately for its context.

If the value represents an offset, the fill start can be set to represent the point of origin. This allows the slider fill to start from inside the track.

Editable

In situations where users should be able to precisely input a value, the value can be editable within a text field. This editable input should be labelled using "aria-labelledby" or "aria-label".

Disabled

A slider in a disabled state shows that an input exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a slider may become available later.

Keyboard Focus

A slider can be navigated using a keyboard. The keyboard focus state takes the slider’s visual hover state and adds a ring to the slider handle in focus, copying the color style of the variant.

Value Placement

The value follows the placement of the label: on top when the label is on top, and on the side when the label is on the side. There is an exception to this rule when the value is editable, shown within a text field; in this case, the editable input can be placed on the side.

Mixed Value

A slider representing multiple non-identical values appears as indeterminate, with an en dash (–) in place of the value. The handle position corresponds to the first selected value.

Text Overflow

When the label is too long for the available horizontal space, it wraps to form another line.

After a slider has been adjusted, it can be reset to the default value by double-clicking the handle.