Input range
The input range provides a visual indication of adjustable content, where the user can increase or decrease the value of the range.
How to use an input range
Input ranges allow users to select a specific value by dragging a slider across a range of values.
When using an input range:
- Only use an input range for imprecise values
- The relative value is more important than the specific value, so don't be too granular with your values
- Make sure that users can select a value range easily without having to struggle for a precise value
Types of input range
Horizontal
With label
An input range should always be accompanied by a label, even if that label is hidden. When a label is displayed, it should clearly communicate the purpose of the input range and its values.
Labels are not instructional text but they should be meaningful and clearly indicate what is expected.
With supporting text
Supporting text provides extra guidance or instruction to people filling out a form field. It can also be used to clarify how the information will be used.
Content Guidelines
Copy for an input range should be clear and concise.