Slider

An input where the user selects a value from within a given range, built on Radix UI.

Install

npx shadcn@latest add https://atomx.acau.net/r/slider.json

Usage

Slider is controlled via value / onValueChange and supports multiple thumbs by passing an array. Use min, max, and step to constrain the input range.

const [value, setValue] = React.useState([50])

<Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />

Preview

Single value

Range (two thumbs)

Props

Slider extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>.

Prop	Type	Notes
`value`	`number[]`	Controlled value(s). Length determines thumb count.
`defaultValue`	`number[]`	Initial value when uncontrolled.
`onValueChange`	`(value: number[]) => void`	Fires while dragging.
`min`	`number`	Minimum value. Defaults to `0`.
`max`	`number`	Maximum value. Defaults to `100`.
`step`	`number`	Step increment. Defaults to `1`.
`disabled`	`boolean`	Disable interaction.
`orientation`	`"horizontal" \| "vertical"`	Slider axis. Defaults to `"horizontal"`.