---

## 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)
- variant: default, rail (default: default)
- size: lg, md, sm (default: md)
- 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. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| disabled | `boolean` | no | false | disabled property |
| 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 applied to the slider's interactive area (the `base` slot — not the visual `track` slot). Only applies while not disabled. |
| 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. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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. |
| variant | `'default' | 'rail'` | no | default | Controls the visual style and presentation of the Slider. Determines the component's visual treatment. Available options: default, rail. |
| 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. |
| 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)

### Types
```ts
interface SliderMark {
value: number;
  label?: string;
}
```

```ts
interface SliderRangeStatusText {
/** Value is within the recommended range. */
  insideRecommended?: string;
  /** Value is within the valid range but outside the recommended range. */
  insideValidOnly?: string;
  /** Value is outside the valid range. */
  outsideValid?: string;
}
```

```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

```ts
type BuiltinMintName = (typeof BUILTIN_MINT_NAMES)[number]
```

### Slots (slotClasses keys)
`wrapper`, `header`, `label`, `valueText`, `base`, `track`, `range`, `thumb`, `mark`, `boundaryTick`, `rangeStatus`, `rangeStatusIcon`, `message`