Slider

Pointer and keyboard slider with a glowing track and optional range.

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/slider.json

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

<Slider defaultValue={[64]} aria-label="Volume" />

Pass two values for two thumbs. They stop at each other instead of crossing.

Price$120 – $480

Map a small integer range to labels with formatValue, which is also what screen readers hear.

Auto-lock15 min

Pass a palette name or any hex value to color.

#22d3ee

Red

Green

211

Blue

238

Accepts every div attribute; the ref points at the root.

Prop	Type	Default
`value`	`number[]` Controlled values. One number for a single thumb, two for a range.	`—`
`defaultValue`	`number[]` Initial values when uncontrolled.	`[min]`
`onValueChange`	`(value: number[]) => void` Called on every change while dragging or pressing keys.	`—`
`onValueCommit`	`(value: number[]) => void` Called once when the pointer or key is released.	`—`
`min`	`number` Lowest value.	`0`
`max`	`number` Highest value.	`100`
`step`	`number` Values snap to multiples of step from min.	`1`
`showValue`	`boolean \| "hover"` Value bubble above each thumb, always or only on hover, drag and focus.	`false`
`formatValue`	`(value: number) => string` Formats the bubble and aria-valuetext.	`—`
`thumbLabels`	`string[]` Accessible name per thumb. Ranges default to "Minimum" and "Maximum".	`—`
`name`	`string` Submits the values with a form, as name[] for ranges.	`—`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	`inherited`
`size`	`"sm" \| "md" \| "lg"` Track of 4, 6 or 8px high.	`"md"`
`disabled`	`boolean` Blocks interaction and removes thumbs from the tab order.	`false`

Each thumb has role="slider" with aria-valuemin, aria-valuemax and aria-valuenow.
Arrow keys move by one step, Shift+Arrow and Page Up/Down by ten, Home and End jump to the ends.
A single slider takes its name from aria-label or aria-labelledby; a range uses them to label the group and thumbLabels to name each thumb.
Pressing the track jumps the nearest thumb there and keeps dragging; grabbing a thumb never makes it jump.