Components

Slider

Range input for a single value or a range. Radix-powered. Track h-2 bg-muted, thumb size-5 bordered primary. Provide min / max / step.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Slider defaultValue={[42]} max={100} step={1} />

When to use

  • Filters (price, weight, threshold).
  • Settings sliders (volume, speed).

When not to use

  • Precise numeric input — use Input type='number'.

Usage

Do
  • Show the current value alongside the slider.
  • Set a sensible step so the thumb snaps.
Don't
  • Don't hide min/max labels when the range is arbitrary.