# Slider

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

```twig
<twig:Slider name="demo" min="0" max="100" step="1" value="75" class="mx-auto w-full max-w-xs" />
```

## Installation

```shell
php bin/console ux:install slider --kit shadcn
```
## Usage

```twig
<twig:Slider name="volume" min="0" max="100" value="50" />
```

## Examples

### Range

```twig
<twig:Slider name="range" min="0" max="100" step="5" value="25,50" labels="Min,Max" class="mx-auto w-full max-w-xs" />
```

### Multiple Thumbs

```twig
<twig:Slider name="multi" min="0" max="100" step="10" value="10,20,70" labels="Low,Medium,High" class="mx-auto w-full max-w-xs" />
```

### Vertical

```twig
<div class="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
    <twig:Slider name="vertical-1" min="0" max="100" step="1" value="50" orientation="vertical" />
    <twig:Slider name="vertical-2" min="0" max="100" step="1" value="25" orientation="vertical" />
</div>
```

### Disabled

```twig
<twig:Slider name="disabled" min="0" max="100" step="1" value="50" disabled class="mx-auto w-full max-w-xs" />
```

### Controlled

```twig
<div class="mx-auto grid w-full max-w-xs gap-3" data-controller="slider-display">
    <div class="flex items-center justify-between gap-2">
        <twig:Label for="slider-controlled-temperature">Temperature</twig:Label>
        <span class="text-sm text-muted-foreground" data-slider-display-target="output">0.3, 0.7</span>
    </div>
    <twig:Slider id="slider-controlled-temperature" name="temperature" min="0" max="1" step="0.1" value="0.3,0.7" data-action="input->slider-display#update" />
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<twig:Slider dir="rtl" name="rtl-slider" min="0" max="100" step="1" value="75" class="mx-auto w-full max-w-xs" />
```

## API Reference

### `<twig:Slider>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `min` | `int` | `0` | The minimum value. |
| `max` | `int` | `100` | The maximum value. |
| `step` | `int` | `1` | The step between two adjacent values. |
| `value` | `int\|string\|array` | `null` | A single value, a comma-separated string, or an array of values (one per thumb). |
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | The slider orientation. |
| `disabled` | `bool` | `false` | Whether the slider is disabled. |
| `name` | `string` | `null` | The form field name. If multiple thumbs, `[]` is appended. |
| `labels` | `string\|array` | `null` | A label per thumb (comma-separated string or array). When omitted, single-thumb sliders fall back to `Slider` and multi-thumb sliders fall back to `Slider thumb X of Y`. |
### `data-controller="slider-display"`

| Value | Type | Default | Description |
|:------|:-----|:--------|:------------|
| `data-slider-display-separator-value` | `String` | `'` | The string used to join the thumb values shown in the output. |

| Target | Description |
|:-------|:------------|
| `output` | The element whose text content displays the slider's current values. |

| Action | Description |
|:-------|:------------|
| `update` | Writes the slider's current values into the output target. |