Sliders

Slider is a thin wrapper over the Radix Slider primitive. Reach for it when a number is best chosen by dragging within a known range (volume, opacity, a price band) rather than typed. Pass a single value for one thumb or two values for a range.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: slider.tsx

import { Slider } from "@beacon/design-system";

// Single value
<Slider defaultValue={[50]} max={100} step={1} className="w-[300px]" />

// Range: two thumbs
<Slider defaultValue={[25, 75]} max={100} step={1} className="w-[300px]" />

// Disabled
<Slider defaultValue={[40]} disabled className="w-[300px]" />

Props

Slider forwards every prop from the Radix Slider.Root. The most common ones:

Prop	Type	Default	Description
defaultValue	number[]	—	Uncontrolled starting value. One entry per thumb (range = two entries).
value	number[]	—	Controlled value. Pair with onValueChange.
onValueChange	(value: number[]) => void	—	Fires while dragging as the value changes.
min	number	0	Lower bound of the range.
max	number	100	Upper bound of the range.
step	number	1	Granularity of each move.
disabled	boolean	false	Greys out and blocks interaction.
orientation	"horizontal" | "vertical"	"horizontal"	Track direction.
className	string	—	Extra classes on the root (set a width here).

When to use

• Choosing a value within a bounded, continuous range where the relative position matters more than an exact figure.
• Picking a min/max range (price filter, date band) with the two-thumb variant.
• Settings such as volume, brightness, or opacity where dragging is more natural than typing.

Do not use a slider when the user needs to enter a precise number; use a numeric Input or Stepper instead. For a small set of discrete options reach for Segmented Controls instead.