Command Palette

Search for a command to run...

Slider

shadcn/ui

An input where the user selects a value from within a given range.

Value: 50

Range: 25 - 75

import { Slider } from "@/registry/optics/slider";<Slider defaultValue={[50]} max={100} step={1} /><Slider defaultValue={[25, 75]} max={100} step={1} />

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/slider.json

Props

<Slider />
Name
Type
className
string
defaultValue
number[]
value
number[]
onValueChange
(value: number[]) => void
min
number (default: 0)
max
number (default: 100)
step
number
orientation
"horizontal" | "vertical"
disabled
boolean
variant
"raised" | "ghost" | "outline"
SkeletonSonner