Slider
The slider component allows users to visualize a relative amount or portion of a whole. The slider should be implemented when users are required to set a value that falls within a bounded range in order to provide visual feedback about where that value falls. Sliders can have a discrete or continuous scale, depending on the use case. Continuous scales simply rely on a min and max value whereas discrete scales allow users to snap to specific values.
Use cases for sliders can vary a great deal, but some examples include:
- Setting storage size, memory limit, or other configuration options
- Setting a time range on a chart
- Setting price ranges or other filters
Slider Example
Slider
-
Label: There should be a slider label to the left of the slider, indicating what the slider values represent. A text string or an icon may be used in the label position.
- Slider Handle:
- The slider handle should sit on the selected value.
- The slider handle should move when users click and drag, when users click on a new area along the slide, and when users enter a new value in the field input.
- For discrete sliders, the handle should snap to the closest tic mark value.
- The slide area to the left of the handle should be highlighted in blue, with the slide area to the right in grey.
-
Tooltip: The current value should be displayed in a tooltip when users hover or click on the slider handle.
- Numeric Scale (Optional):
- A numeric scale may be displayed below the slider.
- Displaying a numeric scale is recommended when using a discrete slider that snaps to specific values.
- Note: The scale is not required to denote ALL discrete values.
-
Discrete Values (Optional): When using a discrete scale, each available value may be indicated using marks along the slider. The marks make it clear to users when the slider will snap to specific values.
-
Field Input (Optional): The slider can optionally have a field input on the right side to enter the desired value as an alternative to sliding. The slider button should move to indicate the value entered.
- Unit Dropdown (Optional): A dropdown may be provided in conjunction with the field input if various units are available for selection.
Slider Examples
Slider Example In Context
Future Considerations
- Sliders with two draggable handles, allowing users to set a range
- Vertical sliders
- Sliders with interactive buttons, allowing users to jump to specific values without dragging the slider handle