---

## Slider
Slider for selecting a numeric value or range within min/max bounds.
Supports single and range modes, step snapping, tick marks, and labels.

Optional `validRange` and `recommendedRange` paint the track as a three-zone
gradient (red/yellow/green) and show a live status text that is also announced
via an ARIA live region. Both props are optional and additive — a slider
without `validRange`/`recommendedRange` behaves exactly as before.

**Import:** `import { Slider } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Slider label="Volume" bind:value={volume} />
```

```svelte
<Slider label="Price range" range bind:value={priceRange} min={0} max={500} step={10} showValue />
```

```svelte
<Slider
  label="Consumption share of heating costs"
  bind:value={share}
  min={0}
  max={100}
  step={5}
  validRange={[50, 100]}
  recommendedRange={[60, 80]}
  formatValue={(v) => `${v} %`}
/>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: primary)
- size: lg, md, sm (default: md)
- appearance: default, rail (default: default)
- disabled: true (default: false)
- messageType: error, helper (default: helper)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
| ...SliderVariants | `VariantProps` | no |  | Styling variants from SliderVariants |
| class | `string` | no |  | Extra classes merged onto the root wrapper. |
| disabled | `boolean` | no | false | Whether the Slider is disabled and non-interactive |
| error | `string` | no |  | Error message below the slider. Overrides `helper`. |
| formatValue | `(value: number | [number, number]) => string` | no |  | Format function for the displayed value. |
| helper | `string` | no |  | Helper text below the slider. Hidden when `error` is set. |
| label | `string` | no |  | Text label displayed above the slider. |
| marks | `SliderMark[]` | no |  | Tick marks along the track. |
| max | `number` | no | 100 | Maximum allowed value. |
| min | `number` | no | 0 | Minimum allowed value. |
| mint | `MintProp` | no | 'none' | Micro-interaction preset. |
| name | `string` | no |  | Shared `name` for hidden inputs for form submission. |
| onValueChange | `(value: number | [number, number]) => void` | no |  | Fires after the value changes. Receives the new value. |
| outOfValidRangeIntent | `'danger' | 'warning'` | no | 'danger' | Intent applied outside the `validRange`. `'warning'` for softer limits (recommendation, not a violation), `'danger'` for hard limits. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Slider: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| range | `boolean` | no | false | Enable range mode with two thumbs. |
| rangeStatusText | `SliderRangeStatusText` | no |  | Custom status texts for the three zones. Defaults to the UIB i18n localization (`bt('slider.rangeStatus.*')`). |
| recommendedRange | `[number, number]` | no |  | Recommended value range (UX recommendation, softer than `validRange`). Values inside appear green, values outside yellow (warning). Typically `recommendedRange ⊂ validRange`, but this is not enforced. |
| showValue | `boolean` | no | false | Show the current value next to the label. |
| slotClasses | `Partial<Record<SliderSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: wrapper (root — what `class` also targets) | header | label | valueText | base (the interactive track container) | track | range | thumb | mark | boundaryTick | rangeStatus | rangeStatusIcon | message. |
| step | `number` | no | 1 | Snap to increments of this value. |
| unstyled | `boolean` | no |  | Remove all default tv() classes. |
| validRange | `[number, number]` | no |  | Valid value range (e.g. a legal limit). Values outside it style track and thumb in the `outOfValidRangeIntent` color (default: `danger`). Status changes are announced via an ARIA live region. If the range lies outside `[min, max]`, a console warning is emitted — the visible `min`/`max` are NOT shifted automatically. |
| value | `number | [number, number]` | no |  | Current value. Number for single, [min, max] tuple for range. Supports `bind:value`. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Slider. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the Slider. Affects the component's physical footprint. Available options: lg, md, sm. |
| appearance | `'default' | 'rail'` | no | default | Controls the appearance behavior and appearance of the Slider component. Available options: default, rail. |
| messageType | `'error' | 'helper'` | no | helper | Controls the messageType behavior and appearance of the Slider component. Available options: error, helper. |

Inherited from:
- Omit<SliderVariants, 'error' | 'rangeStatus'> (omit-pattern)
- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)