Slider

A draggable range input.

Installation

bash
npx shadcn@latest add slider

Import

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

Default

Range (Two Handles)

Controlled with value display

Value: 50

Controlled range with display

25 – 75

Disabled

Props

PROPTYPEDEFAULTDESCRIPTION
defaultValuenumber[][0]Initial value (uncontrolled)
valuenumber[]—Controlled value
onValueChange(value: number[]) => void—Called when value changes
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Step increment
disabledbooleanfalseDisables the slider
orientation"horizontal" | "vertical""horizontal"Layout orientation