Slider โ
Slider serves as a visual indicator to allow users to increase or decrease a value, by dragging the component's handle along a horizontal track. The value can be selected between a range that spans over a given minimum and maximum value.
Usage guidelines โ
When to use โ
- To allow users to input a value by dragging a handle (when the selected value doesn't need to be extremely accurate).
When not to use โ
- Do not use if the range is too wide (e.g. 1-1000) or too narrow (e.g. 1-3).
- Do not use when the user needs to input a value that needs to be accurate; use input fields instead.
Writing guidelines โ
Slider caption
Caption goes below the slider and should consist of a short and concise description of the input. Write it in sentence case and without punctuation.
Numeric values
Always set 0 as default start value.
Specifications โ
Anatomy โ
- Start value (or icon)
- Fill
- Handle
- Value
- Track
- End value (or icon)
- Slider caption
Variants โ
Size โ
Slider is available for desktop and mobile viewports. Due to touch interaction, on mobile devices sliders will display the current value above the slider handle. The width of sliders can vary according to the size of the container or device.
Styling โ
Slider is available for both light and dark theme.
The color of the slider depends on its state: default, focused, error or disabled. The color of the icons and text matches the status color.
Behavior โ
Positioning โ
Sliders are commonly found in forms or filter pages or modals.
Alignment โ
Sliders are typically left-aligned in the container they are placed in. For mobile viewport, slider stretches to occupy the full width of the container (that generally corresponds to the whole width of the mobile device).