Components

Slider

An input where the user selects a value from within a given range.

Playground

Value: 50

Range—value.length

Step—step

Orientation—orientation

Inverted—inverted

Disabled—disabled

Usage

Import Slider from the design system and pass defaultValue as an array — the component renders one thumb per entry. Set the range with min, max and step; the track fills with primary up to the thumb.

import { Slider } from "@workspace/ui/components/slider"

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

Range

Pass two values to render a range slider — the filled segment sits between the thumbs, and each thumb snaps to the nearest step. Use minStepsBetweenThumbs to prevent the thumbs from overlapping.

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

Multiple Thumbs

The value array is not limited to two entries — every entry gets a thumb, and onValueChange receives the full sorted array. Useful for multi-stop controls like gradient or breakpoint editors.

<Slider defaultValue={[10, 20, 70]} max={100} step={10} />

Controlled

Use value and onValueChange to control the state — the callback fires on every move while dragging. Listen to onValueCommit instead when you only care about the final value, such as persisting a setting.

Volume: 40

const [volume, setVolume] = React.useState([40])

<Label>Volume: {volume[0]}</Label>
<Slider value={volume} onValueChange={setVolume} max={100} step={1} />

Vertical

Set orientation="vertical" to rotate the slider — the track grows to fill the container height, with a 160px minimum. Values increase from bottom to top; pass inverted to flip the direction.

<div className="flex h-48 justify-center gap-12">
  <Slider defaultValue={[30]} max={100} step={1} orientation="vertical" />
  <Slider defaultValue={[20, 80]} max={100} step={1} orientation="vertical" />
</div>

Disabled

Use the disabled prop to prevent interaction — the whole control dims to 50% opacity via data-disabled and stops receiving pointer and keyboard events. The current value stays visible.

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

RTL

Set dir="rtl" on the slider or inherit it from a Direction provider — the track fills from the right and arrow keys follow the reading direction.

مستوى الصوت

<div dir="rtl" className="space-y-3">
  <Label>مستوى الصوت</Label>
  <Slider defaultValue={[33]} max={100} step={1} dir="rtl" />
</div>

API Reference

Slider wraps the Radix Slider primitive and accepts all of its props — uncontrolled via defaultValue or controlled via value + onValueChange. Every value is an array with one entry per thumb. Inside a form, each thumb submits its value under name.

Prop	Type	Default
defaultValue	number[]	—
value	number[]	—
onValueChange	(value: number[]) => void	—
onValueCommit	(value: number[]) => void	—
min	number	0
max	number	100
step	number	1
minStepsBetweenThumbs	number	0
orientation	"horizontal" \| "vertical"	"horizontal"
dir	"ltr" \| "rtl"	—
inverted	boolean	false
disabled	boolean	—
name	string	—
form	string	—

Tokens used

5 design tokens consumed by the Slider component.

--primary
Primary
bg-primaryborder-primary
--muted
Muted
bg-muted
--background
Background
bg-background
--ring
Ring
ring-ring/50hover:ring-4focus-visible:ring-4
--spacing
Spacing unit (4px)
size-4data-horizontal:h-1.5data-vertical:w-1.5data-vertical:min-h-40