Slider

An input component for selecting a value from a range.

Value: 50

Installation

npm i @radix-ui/react-slider

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

export function SliderDemo() {
  return <Slider defaultValue={[50]} max={100} step={1} />
}

Horizontal (default)

Vertical

Single Value

Range

Multiple Values

Prop	Type	Description
defaultValue	number[]	The default value of the slider (uncontrolled).
value	number[]	The controlled value of the slider.
onValueChange	function	Event handler called when the value changes.
min	number	The minimum value for the range. Defaults to 0.
max	number	The maximum value for the range. Defaults to 100.
step	number	The step interval between values. Defaults to 1.
orientation	"horizontal" \| "vertical"	The orientation of the slider. Defaults to "horizontal".
disabled	boolean	When true, prevents the user from interacting with the slider.