Slider

When to use

• To set a value on a known scale where the rough position matters more than the exact number: target RPE, session length, rest time.
• To set a range with two thumbs: a daily carb range, a price range for packages.
• Always with a visible label and the current value next to it.

When not to use

• When the exact number matters, or the range is large (a body weight, a price): use an Input with a unit. Coaches can type 82.5 faster than they can drag to it.
• For settings with a few named steps ("Beginner, Intermediate, Advanced"): use a Radio group or a Select.
• To set values across a grid such as sets × weeks: that is the Matrix slider.
• To show progress: use a progress bar. A slider is always an input.

Anatomy

Variants

• Single value: one thumb; the range fills from the start of the track to the thumb.
• Range: pass two values ([150, 220]) for two thumbs; the fill sits between them. minStepsBetweenThumbs keeps them apart.
• Stepped: step sets the increment: 0.5 for RPE, 5 for minutes, 10 for grams. Pick the step coaches would write down.

Vertical sliders (orientation="vertical") are supported but not used in coach-admin today.

States

There is no invalid state: the slider can't hold a value outside min and max. Put limits in the scale, not in an error message.

Each thumb carries role="slider", so the component forwards aria-label or aria-labelledby to the thumbs. A range slider names each thumb with thumbLabels ("Minimum carbs", "Maximum carbs"), and getValueText sets what a screen reader speaks for the value ("120 g"). Upstream shadcn put the label on the root, where screen readers don't read it; this version fixes that.

Usage guidelines

• Use a scale that fits the decision: RPE 1–10 in steps of 0.5, not 0–100.
• Keep the default on a sensible value (RPE 8, 45 minutes), not at the minimum.
• Save on release (onValueCommit) when a change triggers a request; update the visible value on every move (onValueChange).
• Pair a slider with an input when coaches sometimes need an exact number.

Content guidelines

• Label: the thing being set, sentence case: "Target RPE", "Session length", "Daily carbs".
• Value: digits and a unit, as on the Content page: "45 min", "150–220 g", "90 s". Use an en dash in ranges.
• If the scale needs explaining, add one line of help text below: "10 means no reps left."
• Arabic: units follow the number in Arabic ("45 دقيقة", "150–220 غ"), with Western digits (QUESTIONS Q22).

Accessibility

• Each thumb has role="slider" with aria-valuemin, aria-valuemax and aria-valuenow. Once the naming gap above is fixed, a screen reader announces "Target RPE, slider, 8".
• Numbers alone can be unclear: pass a value text with the unit ("45 minutes") so the announcement matches the screen.
• The thumb is 16px. It meets WCAG 2.5.8 through the spacing exception, so keep other targets at least 24px from its center. Pointer users can also click anywhere on the track.
• Changes are announced as the value changes; don't add a live region for the visible value too, or screen readers read it twice.

RTL

• The track fills from the right: the minimum is on the right and the range grows to the left. Radix reads the direction from the provider.
• Arrow keys follow the visual direction: Arrow left increases in RTL. Up and down don't change.
• The label stays at the start of the row and the value at the end, so they swap sides too.
• Numbers keep Western digits and read left to right inside the Arabic value ("150–220 غ").

Tokens used

Read from components/ui/slider.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.

• Opacityopacity-(--opacity-disabled)
• Radiusrounded-full
• Shadowshadow-sm

Props

Replaces in coach-admin

Related

Input, Radio group, Matrix slider, Form.