{
"title": "Slider",
"description": "Continuous-value slider with single, range, or N-thumb selection, full keyboard nav, RTL, and orientation support.",
"url": "/docs/components/slider",
"since": "0.2.0",
"tags": [
"input",
"form"
],
"platform": "both",
"source": "---\ntitle: Slider\ndescription: Continuous-value slider with single, range, or N-thumb selection, full keyboard nav, RTL, and orientation support.\nsince: 0.2.0\ntags: [input, form]\nplatform: both\ncategory: inputs\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n\n\n## At a glance\n\n- `value` and `defaultValue` are always arrays — pass `[n]` for single-thumb, `[low, high]` for range, `[a, b, c, ...]` for multi-thumb pickers.\n- `onChange` fires continuously while dragging; `onValueCommit` fires once when the interaction ends.\n- Web pointer behavior: clicking the track moves the nearest thumb; dragging keeps the cursor captured even if it strays off the thumb.\n- Keyboard: arrow keys ±step (axis follows orientation; horizontal honors `dir=\"rtl\"` and `inverted`), PageUp/Down ±10·step (or 10% of range), Home/End to min/max.\n- `minStepsBetweenThumbs` enforces a gap so adjacent thumbs can't overlap.\n- `dir=\"rtl\"` flips the visual mapping for horizontal sliders so the higher value sits on the left.\n- Native: tap-to-position + keyboard work; long-press dragging is a future enhancement on RN.\n\n## Preview\n\nSingle thumb plus a two-thumb range. Drag, click the track, or tab to a thumb and use the arrow keys.\n\n\n\n## Multi-thumb\n\nThree or more thumbs work the same way as range. `minStepsBetweenThumbs` enforces a gap so adjacent thumbs can't pass each other.\n\n\n\n## Vertical\n\nHigher values sit at the top. Arrow Up / Arrow Down change the value (axis follows orientation).\n\n\n\n## RTL\n\n`dir=\"rtl\"` flips the visual mapping so the higher value sits on the left. Arrow Right then *decreases* the value, matching how a reader expects \"right\" to behave in the opposite reading direction.\n\n\n\n## Disabled\n\n\n\n## `min`, `max`, `step`\n\nThe slider's value space. `min` (default `0`) and `max` (default `100`)\nbound the legal range; `step` (default `1`) is the increment that\narrow-key changes and snap-on-drag honor. `step` must divide\n`max - min` cleanly — non-integer steps work for currency / fractional\nsliders.\n\n```tsx\n\n\n```\n\n## `orientation` and `length`\n\n`orientation=\"horizontal\"` (default) lays the track left-to-right;\n`vertical` runs bottom-to-top. `length` sets the track size in pixels\nalong its axis — width for horizontal, height for vertical.\n\n```tsx\n\n```\n\n## `disabled`\n\nGreys the track + thumb, blocks pointer + keyboard interaction, and\nforwards `aria-disabled`.\n\n```tsx\n\n```\n\n## `onInteractionStart` and `onInteractionEnd`\n\nBracket the user's drag / keyboard interaction. `onInteractionStart`\nfires once when the user begins driving the slider (pointer down,\nfirst arrow key); `onInteractionEnd` fires once when they stop. Pair\nwith `onChange` (continuous, every step) and `onValueCommit` (final\nvalue at end of interaction) when the change is expensive enough to\ndebounce.\n\n```tsx\n analytics.track('slider:start')}\n onInteractionEnd={() => analytics.track('slider:end')}\n onValueCommit={(values) => save(values[0])}\n/>\n```\n\n## `aria-label` and `ariaLabelForThumb`\n\nSlider tracks need an accessible name (`aria-label` or\n`aria-labelledby` on the slider). For multi-thumb sliders, label each\nthumb individually via `ariaLabelForThumb` — a function that receives\nthe thumb's index and returns the label string.\n\n```tsx\n i === 0 ? 'Minimum price' : 'Maximum price'}\n defaultValue={[20, 80]}\n/>\n```\n\n## Props\n\n\n"
}