Slider

Pick a value within a range by dragging a thumb along a track.

Description

Slider is built on the Radix Slider primitive. Drag the thumb along the track to set a value between min and max; the filled portion of the track shows the current value. It ships in two colors (variant primary / neutral) and three sizes (size md / sm / xs).

Reach for it when the relative position of a value reads faster than the exact number — volume, brightness, opacity, a value within a known range. When the user needs to type or precisely step an exact number, use Input (type="number") or InputStepper instead. For a binary on/off, use Switch.

There is no built-in label — pair the slider with a Label (via htmlFor / id) or an aria-label so it announces its purpose.

Installation

pnpm dlx @create-ui/cli add slider

Usage

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

<Slider defaultValue={[50]} />

value and defaultValue are number arrays (a Radix convention), even for a single thumb: pass [50], not 50.

Examples

Sizes

size scales the track height and thumb together. Set it on the Slider itself.

Controlled

Pass value and onValueChange to drive the slider from your own state — useful when other UI needs to react to the value or when you display it. Omit them (use defaultValue) for a simple uncontrolled slider. onValueChange receives a number[].

Opacity42%

Accessibility

Built on the Radix Slider primitive, so the thumb is role="slider" with aria-valuemin / aria-valuemax / aria-valuenow, and it is keyboard operable.

Key	Description
`→` `↑`	Increase the value by one `step`.
`←` `↓`	Decrease the value by one `step`.
`Home`	Jump to `min`.
`End`	Jump to `max`.
`Page Up` `Page Down`	Increase / decrease by a larger step.

ARIA notes:

There is no built-in label. Add a Label (htmlFor + id on the slider) or an aria-label so the thumb announces what it controls.
value reflects to aria-valuenow; provide aria-valuetext (Radix passthrough) when the raw number isn't self-explanatory (e.g. a currency or percentage).

Styling

Tailwind override: pass className to merge Tailwind classes with the component's CVA classes (via cn()). It lands on the slider root, so width utilities work there.

<Slider defaultValue={[50]} className="w-full max-w-xs" />

Data slots and attributes: the component sets these for CSS targeting.

data-slot="slider" on the root, data-slot="slider-track" on the track, data-slot="slider-range" on the filled range, data-slot="slider-thumb" on the thumb.
data-variant="<variant>" and data-size="<size>" on the root.
Radix sets data-disabled and data-orientation on the relevant elements.

Input: use this (with type="number") when the user needs to type or read an exact value rather than drag.
InputStepper: use this to nudge a number up/down in fixed steps with explicit +/- controls.
Switch: use this for a binary on/off rather than a value along a range.

API Reference

Slider

Wraps Radix Slider.Root, so its props (min, max, step, disabled, orientation, aria-*, …) are accepted.

Props

Prop	Type	Default	Description
`variant`	`"primary"` `"neutral"`	`"primary"`	Fill color of the track range.
`size`	`"md"` `"sm"` `"xs"`	`"md"`	Scales the track height and thumb together.
`value`	`number[]`	-	Controlled value (array, even for a single thumb).
`defaultValue`	`number[]`	`[min]`	Uncontrolled initial value.
`onValueChange`	`(value: number[]) => void`	-	Fires as the thumb moves.
`min`	`number`	`0`	Track start.
`max`	`number`	`100`	Track end.
`step`	`number`	`1`	Increment the thumb snaps to.
`disabled`	`boolean`	-	Disables the slider.
`className`	`string`	-	Classes merged with the component's CVA classes.

Separator Social Login Button