Range
A range lets users choose an approximate value on a slider.
When to use
- An approximate value where the exact number does not matter, such as a volume or an opacity.
- A value whose effect people can see change as they drag.
- A bounded range with a sensible default.
When not to use
- A value that must be precise. It is hard to land on an exact number by dragging, so use a text field.
- A large range, where moving one pixel changes the value by many units.
- A choice from a few fixed options. Use radio buttons or a select.
- Anything without a visible result. Without feedback, people are guessing.
Guidance
Do
Show the current value in the label and give the range sensible steps, so people know what they have chosen.
Don't
Do not hide the value, and do not cover a whole hour in one slider. People cannot tell what they have chosen or land on a round number.
Content
What to write, and what to leave out.
- Put the current value in the label, so people do not have to judge it from the handle.
- Give a unit. Thirty on its own does not say thirty of what.
- Label the ends when the range is not obvious.