Slider

An interactive slider with glass effects for selecting values smoothly within a range.

Installation

npx shadcn@latest add @scrollxui/slider

import { Slider } from '@/components/ui/slider';

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

An interactive slider with glass effects for selecting values smoothly within a range.

Property	Type	Default	Description
`defaultValue`	number \| number[]	`required`	Initial slider value or range. Sets thumb position(s) on render.
`value`	number \| number[]	`-`	Controlled value or range. Updates thumb position(s) when changed.
`min`	number	`—`	Minimum selectable value of the slider.
`max`	number	`100`	Maximum selectable value of the slider.
`className`	string	`-`	Custom CSS classes for styling the slider root.
`children`	ReactNode	`optional`	Optional nested content inside the slider.