# Slider

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

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://www.sisyphosui.com/docs/components/slider

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

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

## Framework usage

### React 18+

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

export const Volume = () => {
  const [v, setV] = useState(50);
  return <Slider value={v} onChange={setV} ariaLabel="Volume" showValue />;
};
```

### Vue 3+

```vue
<script setup lang="ts">
import { ref } from "vue";
import { Slider } from "@sisyphos-ui/vue";
const v = ref(50);
</script>

<template>
  <Slider v-model="v" ariaLabel="Volume" :showValue="true" />
</template>
```

### Angular 17+

```ts
import { Component, signal } from "@angular/core";
import { Slider } from "@sisyphos-ui/angular";

@Component({
  selector: "app-volume",
  standalone: true,
  imports: [Slider],
  template: `<sui-slider [(value)]="v" ariaLabel="Volume" [showValue]="true" />`,
})
export class VolumeComponent {
  v = signal(50);
}
```

## Examples

### Single value

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

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/react";

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/react";

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/react";

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/react";

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/react";

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

<!-- exports: { "Slider": "@sisyphos-ui/react" } -->