Slider selects values along a continuum—volumes, zoom levels, time windows, thresholds—where relative position communicates magnitude. Pair a numeric input when precision matters; sliders alone suit exploratory adjustment, not exact compliance thresholds. The mental model is "more or less, and I can feel it by dragging"—not "enter 42".
Volume35
0123456789012345678935
Reset zoom to 100%
When to use
Operators benefit from gestural adjustment with immediate feedback (media volume, map zoom proxies, UI density).
Ranges (RangeSlider) express min/max filters (time slice, radius, value window) when the bounds are meaningful.
A value where "about here" is the task, not a specific number.
When not to use
Exact legal, contractual, or compliance thresholds—prefer a validated numeric Input.
Values operators commonly paste from spreadsheets—text entry first, slider second.
Content guidelines
Labels include units ("Radius (mi)", "Zoom level"). Localize with formatMessage. Show min/max anchors when operators need a reference.
Show the current value near the thumb or in an adjacent field. Precision matters even when dragging.
Behavior and states
Step size. Match the domain's granularity (integer people counts vs. fractional opacity).
Clamping. Validate text-field edits against the slider's bounds; the two controls should stay in sync.
Drag side effects. Debounce expensive operations that fire on every drag event. Commit on release when the cost of transient values is high.
Disabled. Surface the dependency on another setting when it applies.
Best practices
Do
Default to safe or neutral values. Show live preview when changing affects media, maps, or layouts.
Size tracks for touch; thumbs should not be microscopic on tablets.
Pair the slider with a numeric input when both gesture and precision are needed.
Don't
Use a slider for binary settings—Switch communicates on/off clearly.
Hide the current numeric value when precision matters. Show the number or its input companion.
Animate value changes so slowly that the operator can't tell if the drag registered.
Accessibility
Thumbs are keyboard operable; announcements for value changes should not spam during drag (consider commit-on-release patterns when noisy); labels and current values are exposed to assistive technology. See Accessibility for the full contract.