Slider — Design System

Use cases

Volume / brightness — continuous value within a bounded range.
Price filter — dual-thumb range slider for min/max filtering.
Configuration — any numeric setting where a visual track provides context (e.g. 0–100 scale).

When NOT to use

Precise numeric input → use a number Input with stepper buttons.
Discrete few options → use RadioGroup or SegmentedControl.

Sizes

Size	Track height	Thumb diameter	Use when
`sm`	4px	14px	Dense settings panels.
`md`	8px	20px	Default for most UIs.
`lg`	12px	24px	Touch-primary or high-visibility.

Key props

Prop	Type	Description
`value`	`number[]`	Controlled value(s).
`defaultValue`	`number[]`	Uncontrolled initial value(s).
`onValueChange`	`(value: number[]) => void`	Called on change.
`min`	`number`	Minimum (default 0).
`max`	`number`	Maximum (default 100).
`step`	`number`	Step increment (default 1).
`size`	`'sm' \| 'md' \| 'lg'`	Visual size variant.
`tone`	`'primary' \| 'accent' \| 'success' \| 'warning' \| 'danger'`	Fixed active range tone.
`segmented`	`boolean`	Use value-based semantic color thresholds.
`showValue`	`boolean`	Show the current value label.
`valueLabelPosition`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	Place the visible value label.
`showTrackLabels`	`boolean`	Show min/max scale labels.
`trackLabelPosition`	`'none' \| 'top' \| 'bottom' \| 'inline'`	Place min/max scale labels.
`labelGap`	`'none' \| 'xs' \| 'sm' \| 'md'`	Control vertical space between the track and top/bottom label rows.
`labelGroupGap`	`'none' \| 'xs' \| 'sm' \| 'md'`	Control spacing between left/right value labels and the adjacent min/max labels.
`rangeClassName`	`string`	Tokenized Tailwind override for the active range.
`disabled`	`boolean`	Disable interaction.

Range mode

Pass two values to get a dual-thumb range slider.

<Slider defaultValue={[25, 75]} max={100} step={5} />

Composition

Pair with a visible Label and an Input showing the current value for precise adjustments.
In range mode, display both values (e.g. "$25 – $75") alongside the slider.
Use showValue with valueLabelPosition when the current value should sit above or below the bar.
Use showTrackLabels with trackLabelPosition when users need to see the scale endpoints. Center value labels share the same top/bottom row and sit between min and max labels.
Use step to snap to meaningful increments — step={5} for percentages, step={0.1} for decimals.

Slider uses the fixed primary brand tone by default. Use segmented only when the selected value represents a bounded health score. The range fill transitions color smoothly when the value crosses thresholds:

const [score, setScore] = useState(72);
 
<Slider
  value={[score]}
  onValueChange={([next]) => setScore(next ?? score)}
  max={100}
  step={1}
  segmented
  showValue
  valueLabelPosition="bottom-center"
  valueFormatter={([next]) => `${Math.round(next ?? 0)} selected`}
/>

The active range uses semantic MiHCM tokens. Use rangeClassName for controlled overrides such as bg-accent or bg-success, not raw color values.

Input — for precise numeric entry.
Progress — read-only progress bar (not interactive).