Value Slider Stable New in 3.2 Dark Theme

A Value Slider allows users to view and select from a range of value along a slidable bar.

General guidance

A Value Slider is intended as an input aid for the user and generates a numerical value. It is not suitable for the exact input of a numerical value, but for relative values, such as settings for brightness or positioning of interactive objects.

Value Slider with applied light and dark theming

Elements

Label describes the value that can be adjusted. Keep the language clear, concise and consistent across the interface.

Handles can be modified to two, to show a range instead of just one value. The handles of the slider can be moved independently or the whole range itself can be moved.

Inputfields and value attributes can display the current selections within ranges. The value of the handles are either shown as tooltips or in the input field.

Dos and don’ts

• Use Value Slider when ease of input is more important over typing values.
• Do set a predefined range by min- and max-value. Selecting a value out of range is not possible.
• Do not use a Value Slider on a too low or too high scale of values.