@ryanhelsing/ry-ui/docs/components/slider.md

Framework-agnostic, Light DOM web components. CSS is the source of truth.

# Slider

## `<ry-slider>`

| Attribute | Values | Description |
|-----------|--------|-------------|
| `min` | number | Minimum (default: 0) |
| `max` | number | Maximum (default: 100) |
| `step` | number | Step (default: 1, 0 = smooth) |
| `value` | number | Current value (single mode) |
| `start` / `end` | number | Range values (with `range`) |
| `range` | boolean | Dual-handle mode |
| `labeled` | boolean | Show min/max labels |
| `ticked` | boolean | Show tick marks |
| `tooltip` | boolean | Show value on hover |
| `vertical` | boolean | Vertical orientation |
| `reversed` | boolean | Reverse direction |
| `color` | primary \| secondary \| success \| warning \| danger \| info | Track color |
| `size` | sm \| lg | Size |
| `disabled` | boolean | Disable |

Events: `ry:input` (during drag), `ry:change` (on release)

```html
<ry-slider min="0" max="100" value="50"></ry-slider>
<ry-slider min="0" max="100" start="25" end="75" range labeled></ry-slider>
<ry-slider min="0" max="10" step="1" value="5" ticked labeled tooltip></ry-slider>
<ry-slider min="0" max="100" value="60" color="success"></ry-slider>
```

JS:
```js
const slider = document.querySelector('ry-slider');

slider.addEventListener('ry:input', (e) => {
  console.log(e.detail.value); // fires during drag
});
slider.addEventListener('ry:change', (e) => {
  saveValue(e.detail.value); // fires on release
});

slider.value;      // 50
slider.value = 75;

// Range slider
rangeSlider.start; // 25
rangeSlider.end;   // 75
```