← All Components

Slider

Range input for selecting numeric values. Built on Radix Slider.

Default

With Live Value

50%

Custom Min/Max/Step

Disabled

Props

PropTypeDescription
defaultValuenumber[]Initial value(s)
valuenumber[]Controlled value(s)
onValueChange(value: number[]) => voidChange handler
minnumberMinimum value (default 0)
maxnumberMaximum value (default 100)
stepnumberStep increment (default 1)
disabledbooleanDisable interaction
classNamestringAdditional classes

Usage

<Slider defaultValue={[50]} /> <Slider defaultValue={[20]} min={0} max={40} step={5} /> <Slider value={volume} onValueChange={setVolume} /> <Slider disabled />