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 the reader can see change as they drag.
- A bounded range with a sensible default.
When not to use
- A value that must be precise. Dragging cannot hit a number reliably, so use a field.
- A large range, where one pixel is worth many units.
- A choice from a small set of steps, which is radios or a select.
- Anything without a visible result. A slider with no feedback is a guess.
Guidance
Do
Show the current value in the label and give the range sensible steps, so the reader knows where they are.
Don't
Do not hide the value and do not span an hour in one slider. The reader cannot tell what they have chosen or hit a round number.
Content
What to write, and what to leave out.
- Put the current value in the label, so it is readable without watching the handle.
- Give a unit. Thirty of what is not a value.
- Label the ends when the range is not obvious.