Patterns · Entering data / Slider and range
Slider and range
A value or a range on a known scale, such as heart rate or activeness.
How it works
speedActiveness
6monitor_heartHeart rate
60 – 90Single value above; a range with two knobs below. Ends say what the scale means.
Rules
- Use a slider only when the scale has fixed ends.
- The value is shown large above the track and updates while dragging.
- Each end has a number and a word.
- Values snap to the scale step.
Motion and haptics
| Moment | Motion | Haptic |
|---|---|---|
| Knob dragged | Follows the finger | Light tick on each step |
Seen in
Assessments
Built from the Antz modules on the Design Links hub, 26 Oct 2026. Not drawn in Figma yet: treat it as a temporary rule.