## Slider
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.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- value: number | [number, number], default —. Position(s); a pair renders a range slider
- min: number, default 0. Range floor
- max: number, default 100. Range ceiling
- step: number | null, default 1. Increment; null with marks to snap to marks only
- marks: { [value]: label }, default —. Labelled tick positions
- range: boolean, default false. Two thumbs — select a [low, high] span
- vertical: boolean, default false. Orient the rail vertically
- disabled: boolean, default false. Non-interactive, dimmed track + handle
- onChange: (value) => void, default —. Fires with the new value(s)
Tokens: colorPrimary, Slider.railBg, Slider.trackBg, Slider.handleColor, Slider.railSize, Slider.handleSize.
Use when: 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).