Slider
Sliders let users adjust a value by dragging a handle along a horizontal track.
Published: Last updated:
Overview
A slider allows users to select a value along a horizontal track.
The slider includes a label and a number input that displays the current value.
When to use
- Use when users need to select a single value.
- Use sliders to clearly display and adjust a value within a defined scale.
- Ideal for exposing a variety of options or quickly limiting values within a set range.
When not to use
- Avoid using sliders for very large ranges, such as 1 to 1000.
- Avoid ranges that are too narrow, for example, 1 to 3.
- Do not use sliders for complex or non-numeric values.
- Label: Text describing what kind of value will be selected from the slider.
- Min value: The minimum value that can be selected in the slider range.
- Max value: The maximum value that can be selected in the slider range.
- Number input: An input to specify a selected value within the slider range.
- Handle: An indicator that can be moved on the track within the slider range to specify a selected value.
- Track: Shows a user’s available minimum and maximum values on the range to select from.
- Assistive text (optional): Additional text that offers support or context to the input label.
- Helper text (optional): Text that offers additional guidance or context for the input field.
Labels
- Labels describe what value or range the slider controls.
- Keep labels short and clear, ideally limited to a single line of text.
- Position labels above the slider so they remain visible while the user interacts with the handle.
Min and max values
- Min and max value text define the lowest and highest points of the slider’s range.
- These values should accurately reflect the limits of what users can select using the slider handles or number inputs.
States
The slider includes the following states: resting, hover, focus, active, error, disabled, and read-only. For detailed behaviour and visual examples of each state, refer to the interactive state guidance in the Style tab.
|
State
|
When to use
|
|---|---|
| Resting | When the slider is active but not being interacted with. This is the default or resting state of the component. |
| Hover | When a user’s cursor hovers over the slider track or handles. If number inputs aren’t present, display a tooltip on hover to show the current values. |
| Focus | When a user navigates to or clicks on the slider handle, indicating it is ready for input. If number inputs aren’t present, display a tooltip on focus to show the current values. |
| Active | When a user is pressing and dragging a handle to adjust the slider value. If number inputs aren’t present, display a tooltip on active to show the current values. |
| Error | When a required slider has no selected value, values fall outside the valid range, or a system error occurs. This state requires user correction before data can be submitted or saved. |
| Disabled | When the slider is inactive and non-interactive. Disabled sliders cannot be focused, read by assistive technologies, or interacted with in any way. |
| Read-only | When users can view but not modify the slider. Unlike disabled sliders, read-only sliders remain focusable, accessible to screen readers, and meet visual contrast requirements for readability. |
Mouse
Users can change the value by clicking anywhere along the horizontal track or by dragging the slider handle. Either action repositions the handle and updates the value in the number input for single sliders. For range sliders, clicking on the track moves the nearest handle (minimum or maximum) and updates its corresponding value automatically.
Keyboard
Users can adjust the slider value by entering a number directly into the input field or by using the arrow keys. The up, down, left, and right arrow keys move the handle according to the defined step value.
Default slider
The default slider consists of a label, a number input, and a slider track with a handle. Users can adjust the value by either dragging the handle or entering a number directly into the input field.
Use the default slider when a single, continuous value needs to be selected within a defined range. If a range of values needs to be selected instead, use the range slider variant.
Sliders without a number input
When a slider does not include number inputs to display selected values, the output is displayed as a tooltip to show the current value. The tooltip should appear on hover, focus, and active states to provide users with clear feedback as they interact with the slider.