Slider

inputs

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

Preview

Installation

npm install @launchapp/design-system

Import

import { Slider } from "@launchapp/design-system";

<Slider defaultValue={[33]} max={100} step={1} className="w-[60%]" />

Prop	Type	Default	Description
`value`	`number[]`	—	Controlled value(s). Array for range sliders.
`defaultValue`	`number[]`	—	Initial value when uncontrolled.
`onValueChange`	`(value: number[]) => void`	—	Callback when value changes.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`disabled`	`boolean`	`false`	Disables the slider.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the slider.