e slider
Range slider serves as a visual indicator to allow users to select a range of values, by dragging the component's handles along a horizontal track. The minimum and maximum value can be selected between a given range of values.
Usage guidelines
When to use
- To allow users to input a range of values by dragging a handle (when the selected range doesn't ne o 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.13.
- Do not use when the user needs to input a value that needs to be accurate; use input fields inta.
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)
- Track
- Minimum value handle
- Minimum value
- Fill
- Maximum value handle
- Maximum value
- 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).
Interaction
