# Slider
> Generated from slider.contract.json — do not edit by hand.

Drag to set a value across a known range — volume, opacity, thresholds, ranges — rendered through the shared Slider.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | number | [number, number] | `—` | Position(s); a pair renders a range slider |
| `min` | number | `0` | Range floor |
| `max` | number | `100` | Range ceiling |
| `step` | number | null | `1` | Increment; null with marks to snap to marks only |
| `marks` | { [value]: label } | `—` | Labelled tick positions |
| `range` | boolean | `false` | Two thumbs — select a [low, high] span |
| `vertical` | boolean | `false` | Orient the rail vertically |
| `disabled` | boolean | `false` | Non-interactive, dimmed track + handle |
| `onChange` | (value) => void | `—` | Fires with the new value(s) |

## Visual standard (measured)
- Rail: 4px · #F1F1F1 (gray-30)
- Track: brand #6A1EBB
- Handle: 14px · brand ring
- Hover rail: #E3E3E3 (gray-40)
- Range: two thumbs when value is a [min,max] pair

## When to use
- **Slider** — an approximate value across a continuous range where feel beats an exact number
- **InputNumber** — the exact number matters — a precise limit or count
- **Slider range** — a span with a low and high bound — a price or time window

Pair a slider with a live value readout (or an InputNumber) when the exact number matters. Use marks and step to snap to meaningful positions rather than an arbitrary continuum.