Keyboard focus

A slider can be navigated using a keyboard. The keyboard focus state takes the slider's visual hover state and adds a blue ring to the slider handle in focus.

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. The exception to this rule is when the value is editable in a text field, either standard or quiet style. In that case, the editable input is always placed on the side and should include an ARIA label for accessibility, using either aria-labelledby or aria-label.

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.

Double-click to reset

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