Slider

Import/Installation

import { Slider } from "@lottiefiles/creator-plugins-ui";

Preview

Usage

import { useState } from "react";

const [value, setValue] = useState([60]);

<p>Value: {value[0]}</p>
<Slider value={value} onValueChange={setValue} min={0} max={100} aria-label="Opacity" />

Props

Prop	Type	Default	Required	Description
value	number[]	—	No	Controlled value. Single-element array for single value (`[50]`), two-element for range (`[20, 80]`).
defaultValue	number[]	—	No	Default value for uncontrolled usage.
onValueChange	(value: number[]) => void	—	No	Callback fired when the value changes.
onValueCommit	(value: number[]) => void	—	No	Callback fired when the value is committed (on mouse/touch release).
min	number	0	No	Minimum value of the slider.
max	number	100	No	Maximum value of the slider.
step	number	1	No	Step increment of the slider.
minStepsBetweenThumbs	number	—	No	Minimum number of steps between thumbs in a range slider. Prevents thumbs from crossing.
orientation	"horizontal" \| "vertical"	"horizontal"	No	Orientation of the slider.
disabled	boolean	—	No	Whether the slider is disabled.
variant	"default" \| "error"	"default"	No	Visual variant of the slider.
aria-label	string	—	No	Optional aria-label. Required for screen readers.

Built on Base UI Slider. See their docs for primitive-level details.