Use sliders to:
- Select a value from a continuous range (e.g., volume, brightness, price range)
- Adjust values where the relative position is more important than the exact number
- Provide visual feedback about the selected value within a range
- Allow quick, approximate value selection with an option for precise input
Do not use sliders:
- When users need to enter precise values, use an input instead
- For small ranges (fewer than 5 values) — use radio buttons instead
- When the exact value is critical and must be precise, use a text input with validation
- For binary choices — use a switch or checkbox instead
|
Use the slider for |
Use text input for |
Use radio buttons for |
|---|---|---|
|
Selecting from a continuous range |
Precise value entry |
Small, distinct value sets (< 5 options) |
|
Visual, relative value selection |
Exact numerical requirements |
Named options without a continuous range |
|
Values where approximate is acceptable |
Critical precision needed |
When all options must be visible |
By combining sliders and inputs, the blend of approximation and precision can be achieved.
Placement
Example of a slider in a form fieldgroup
Sliders are placed in forms like other inputs. They should be positioned with:
- A label above the input and following the form guidelines
- The slider track with a handle
- An input field inline with the slider
Helper text
Helper text is optional but should be used to provide any supporting information, such as:
- "This slider moves in increments of £100"
- "Select a value between 0 and 1000"