Command Palette

Search for a command to run...

Slider

shadcn/ui

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

Slider

Value: 50

Range: 25 - 75

import { Slider } from "@/components/optics/slider";<div className="w-full flex flex-col items-center gap-8">  <div className="w-full max-w-md flex flex-col gap-2">    <Slider      defaultValue={[        50      ]}      max={100}      step={1}    />    <p className="text-sm text-muted-foreground">      Value: 50    </p>  </div>  <div className="w-full max-w-md flex flex-col gap-2">    <Slider      defaultValue={[        25,        75      ]}      max={100}      step={1}    />    <p className="text-sm text-muted-foreground">      Range: 25 - 75    </p>  </div></div>

Installation

pnpm dlx shadcn@latest add @optics/slider

Props

<Slider />
Name
Type
format
Intl.NumberFormatOptions
locale
Intl.LocalesArgument
minStepsBetweenValues
number
largeStep
number
thumbAlignment
"center" | "edge" | "edge-client-only"
thumbCollisionBehavior
"push" | "swap" | "none"
onValueChange
(...args) => void
onValueCommitted
(...args) => void
render
React.ReactElement
getAriaLabel
((index: number) => string)
getAriaValueText
((formattedValue: string, value: number, index: number) => string)
index
number
inputRef
React.Ref<HTMLInputElement>
SkeletonSonner