Slider

Usage

Overview

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

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.
Categorical choices—use Select or SegmentedControl.
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

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.

Input for exact numeric entry.
Progress for non-interactive progress display.
Audio player for volume-and-playback patterns.

Skeleton / Accessibility

Slider / API and Development

On this page

Slider

Usage

Overview

Volume35

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.
Categorical choices—use Select or SegmentedControl.
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

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

Input for exact numeric entry.
Progress for non-interactive progress display.
Audio player for volume-and-playback patterns.

Skeleton / Accessibility

Slider / API and Development

On this page