Components

Slider

Lets users select a single value or a range from a continuous scale by dragging a thumb along a track.

Basic usage

Pass a single-element defaultValue array for an uncontrolled single-thumb slider.

Provide two values to render two thumbs that define a lower and upper bound — ideal for price or date ranges.

Use step to snap to coarser increments, and disabled to make the control read-only.

Prop	Type	Default	Description
`defaultValue`	number[]	`[min, max]`	Uncontrolled starting value. Pass one number for a single thumb or two for a range.
`value`	number[]	`—`	Controlled value. When set, you must update it via onValueChange.
`onValueChange`	(value: number[]) => void	`—`	Fires continuously as the thumb is dragged or moved with the keyboard.
`onValueCommit`	(value: number[]) => void	`—`	Fires once when the user finishes interacting (pointer up / blur).
`min`	number	`0`	Minimum allowed value.
`max`	number	`100`	Maximum allowed value.
`step`	number	`1`	Stepping interval the thumb snaps to.
`orientation`	'horizontal' \| 'vertical'	`'horizontal'`	Layout direction of the track.
`disabled`	boolean	`false`	Prevents interaction and reduces opacity to 50%.
`className`	string	`—`	Additional Tailwind classes to merge onto the root.
`...rest`	SliderPrimitive.Root props	`—`	All Radix Slider root props are forwarded.

Built on Radix UI Slider — each thumb is a focusable element with role="slider" and the correct aria-valuemin, aria-valuemax, and aria-valuenow.
Fully keyboard operable: Arrow keys move by one step, Page Up/Page Down by a larger amount, and Home/End jump to the bounds.
Each thumb shows a visible focus-visible ring using the brand gold ring token for keyboard navigation.
When no visible label is present, associate the slider with descriptive text via aria-label or aria-labelledby so screen reader users know what it controls.