# Slider

> Range selector with single or dual thumbs, step snapping, marks, and keyboard arrow support.

- Package: `@sisyphos-ui/slider`
- Docs: https://sisyphosui.com/docs/components/slider
- npm: https://www.npmjs.com/package/@sisyphos-ui/slider

## Installation

```bash
pnpm add @sisyphos-ui/slider @sisyphos-ui/core
```

Or use the umbrella package:

```bash
pnpm add @sisyphos-ui/ui
```

## Import

```tsx
import "@sisyphos-ui/slider/styles.css";
import { Slider } from "@sisyphos-ui/slider";
```

## Examples

### Single value

```tsx
import { useState } from "react";
import { Slider } from "@sisyphos-ui/ui";

export function Example() {
  const [volume, setVolume] = useState(40);

  return (
    <div className="w-full max-w-md">
      <Slider min={0} max={100} step={1} value={volume} onChange={setVolume} />
      <p className="mt-2 text-xs text-neutral-500">Value: {volume}</p>
    </div>
  );
}
```

### Range

Pass two thumbs by adding `range` and a tuple value.

```tsx
import { useState } from "react";
import { Slider } from "@sisyphos-ui/ui";

export function Example() {
  const [range, setRange] = useState<[number, number]>([20, 80]);

  return (
    <div className="w-full max-w-md">
      <Slider range min={0} max={100} value={range} onChange={setRange} />
      <p className="mt-2 text-xs text-neutral-500">
        Range: {range[0]} – {range[1]}
      </p>
    </div>
  );
}
```

### Show value labels

Render live value bubbles above the thumbs via `showValue`.

```tsx
import { useState } from "react";
import { Slider } from "@sisyphos-ui/ui";

export function Example() {
  const [v, setV] = useState(60);

  return (
    <Slider
      min={0}
      max={100}
      value={v}
      onChange={setV}
      showValue
      ariaLabel="Brightness"
    />
  );
}
```

### Formatted values

`formatValue` lets you add currency, units, or locale formatting.

```tsx
import { useState } from "react";
import { Slider } from "@sisyphos-ui/ui";

export function Example() {
  const [v, setV] = useState<[number, number]>([120, 480]);

  return (
    <Slider
      range
      min={0}
      max={1000}
      step={10}
      value={v}
      onChange={setV}
      showValue
      formatValue={(n) => `$${n.toLocaleString()}`}
      ariaLabel={["Minimum price", "Maximum price"]}
    />
  );
}
```

### Disabled

Works for both single and range modes.

```tsx
import { Slider } from "@sisyphos-ui/ui";

export function Example() {
  return (
    <>
      <Slider disabled value={30} />
      <Slider disabled range value={[20, 70]} />
    </>
  );
}
```

### Semantic colors

Reuse the 5-color palette shared across the library.

```tsx
import { Slider } from "@sisyphos-ui/ui";

export function Example() {
  return (
    <>
      <Slider color="success" value={40} />
      <Slider color="warning" value={65} />
      <Slider color="error"   value={85} />
      <Slider color="info"    value={25} />
    </>
  );
}
```