# Slider
Single-value or range slider for numeric adjustments.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Slider } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/slider
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=slider--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="128" title="Slider component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
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

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

Built on [Base UI Slider](https://base-ui.com/react/components/slider). See their docs for primitive-level details.