Slider

Creativity

Reasoning effort

Price range

$120

$480

Installation

pnpm dlx shadcn@latest add @paneui/slider

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

<Slider defaultValue={40} aria-label="Creativity" />

Use when the value is shown or used elsewhere.

Use in tall, narrow spaces such as a mixer column.

Use when the steps matter, such as a rating.

With reduced motion the thumb and value bubble don't animate.

Arrow keys move the focused thumb by step; Page Up / Page Down and Home / End jump further.

For a single value with the label on the track, see Range Slider Inline.

Built on the Slider primitive. Only the props this library adds or changes are listed; everything else passes through.

Inset track, primary fill and a raised thumb. Pass an array value for a range. Also accepts every prop of Slider.Root.

size= "default": "sm" | "default" | "lg"; Thumb 16 / 20 / 24px on a 6 / 8 / 10px track. Inside a sized Field it takes the field's size (xs maps to sm).
ticks: boolean | number; Dots along the track. true draws one per step; a number (2–101) draws that many, evenly spaced.
showValue: boolean | "always"; true shows a value bubble over each thumb on hover, focus and drag; "always" keeps it up.
getThumbLabel: (index: number) => string; Accessible label per thumb, e.g. (i) => (i ? "Max" : "Min") for a range.
min= 0: number; Lowest value.
max= 100: number; Highest value.
step= 1: number; Step between values.
orientation= "horizontal": "horizontal" | "vertical"; Layout direction. Vertical fills the parent's height, at least 160px.
thumbAlignment= "edge": "edge" | "center"; edge keeps the thumb inside the track at both ends (the primitive defaults to center).
format: Intl.NumberFormatOptions; Formats the value bubble, e.g. currency.

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Thumb 16 / 20 / 24px on a 6 / 8 / 10px track. Inside a sized `Field` it takes the field's size (`xs` maps to `sm`).
ticks	boolean \| number	—	Dots along the track. `true` draws one per step; a number (2–101) draws that many, evenly spaced.
showValue	boolean \| "always"	—	`true` shows a value bubble over each thumb on hover, focus and drag; `"always"` keeps it up.
getThumbLabel	(index: number) => string	—	Accessible label per thumb, e.g. `(i) => (i ? "Max" : "Min")` for a range.
min	number	0	Lowest value.
max	number	100	Highest value.
step	number	1	Step between values.
orientation	"horizontal" \| "vertical"	"horizontal"	Layout direction. Vertical fills the parent's height, at least 160px.
thumbAlignment	"edge" \| "center"	"edge"	`edge` keeps the thumb inside the track at both ends (the primitive defaults to `center`).
format	Intl.NumberFormatOptions	—	Formats the value bubble, e.g. currency.

data-size: On the root, the resolved size.
data-dragging: On the thumb while it is dragged (scaled up).
data-active: On a tick (data-slot="slider-tick") inside the selected range.
data-disabled: Present when disabled.

Data attribute	Description
data-size	On the root, the resolved size.
data-dragging	On the thumb while it is dragged (scaled up).
data-active	On a tick (`data-slot="slider-tick"`) inside the selected range.
data-disabled	Present when disabled.