Slider
An input for selecting a value or range by dragging thumbs along a track. Built on Base UI with four sizes and a vertical orientation.
Playground
<Slider defaultValue={[50]} />Preview
Pass defaultValue as an array – one entry per thumb. A single-entry array renders one thumb with the filled range starting at min.
<Slider defaultValue={[50]} className="max-w-sm" />Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/slider.jsonUsage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={[25, 75]} min={0} max={100} step={1} />Sizes
size scales the track thickness and thumb together: sm, default, lg and xl.
<Slider size="sm" defaultValue={[50]} />
<Slider size="default" defaultValue={[50]} />
<Slider size="lg" defaultValue={[50]} />
<Slider size="xl" defaultValue={[50]} />Range and multiple thumbs
Two values make a range slider; the filled indicator spans between the thumbs. Any number of entries works – each value gets its own thumb.
<Slider defaultValue={[25, 75]} />
<Slider defaultValue={[20, 50, 80]} />Vertical
orientation="vertical" flips the axis. The control enforces a minimum height of min-h-40; give the wrapper an explicit height to size it.
<div className="flex h-40 items-center gap-8">
<Slider defaultValue={[50]} orientation="vertical" />
<Slider size="lg" defaultValue={[25, 75]} orientation="vertical" />
</div>Step and disabled
step snaps values to an increment; disabled mutes the thumb, drops its shadow and blocks pointer interaction.
<Slider defaultValue={[50]} step={10} />
<Slider defaultValue={[25, 75]} disabled />API reference
Slider is a single component that composes the Base UI Root, Control, Track, Indicator and Thumb parts internally – it accepts every Base UI Slider.Root prop (onValueChange, onValueCommitted, name, largeStep, …) plus the ones below. Thumbs are derived from the length of value / defaultValue.
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "xl" | "default" | Scales track thickness (2px to 10px) and thumb diameter (14px to 24px) together. |
| value | number | number[] | – | Controlled value(s). Use an array with one entry per thumb, paired with onValueChange. |
| defaultValue | number | number[] | [min, max] | Uncontrolled initial value(s). When omitted, both a min and a max thumb are rendered. |
| min | number | 0 | Smallest selectable value. |
| max | number | 100 | Largest selectable value. |
| step | number | 1 | Granularity the values snap to while dragging. |
| orientation | "horizontal" | "vertical" | "horizontal" | Axis of the track. Vertical sliders fill the container height (min-h-40). |
| disabled | boolean | false | Blocks interaction and renders the thumb in a muted, shadowless style. |
The internal parts are exposed through data-slot attributes for styling:
| Component | Description |
|---|---|
| Root | data-slot="slider". Also reflects the active size as data-size and orientation as data-horizontal / data-vertical. |
| Track | data-slot="slider-track". The rounded bg-secondary rail behind the thumbs. |
| Range | data-slot="slider-range". The bg-primary filled indicator between min (or the lowest thumb) and the active thumb. |
| Thumb | data-slot="slider-thumb". White circular handle; stretches along the drag axis while active via a spring transition and grows a ring on hover, active and focus-visible. |
Accessibility & styling hooks
Each thumb renders a hidden native input, so the slider works with forms and keyboard navigation out of the box – arrow keys move by step, Page Up/Down by largeStep, Home/End jump to the bounds, and Base UI wires up the slider ARIA semantics (min, max and current value). Every thumb has an enlarged invisible hit area (after:-inset-2) for touch. State is mirrored as data-disabled, data-dragging, data-horizontal and data-vertical attributes for CSS targeting.