Slider

An input for selecting a numeric value within a range by dragging a thumb along a track. Built on Radix UI Slider.

Range Slider

Pass two values to create a range slider with two thumbs:

Installation

Props

PropTypeDefaultDescription
value
number[]Controlled value. Array for range sliders.
onValueChange
(value: number[]) => voidCallback when value changes.
defaultValue
number[][0]Uncontrolled default value.
min
number0Minimum value.
max
number100Maximum value.
step
number1Step increment.
disabled
booleanfalsePrevents interaction.
orientation
"horizontal" | "vertical""horizontal"Slider orientation.