Slider

registry/examples/slider-demo.tsx

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

export default function SliderDemo() {

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/slider.json

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

<Slider defaultValue={[50]} max={100} step={1} />

Prop	Type	Default	Description
`value`	`number[]`	-	Controlled value
`defaultValue`	`number[]`	`[0]`	Default value
`onValueChange`	`(value: number[]) => void`	-	Callback when value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`disabled`	`boolean`	`false`	Disable the slider
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Slider orientation