import { Slider } from "@elabs-ai/components-ui";npm install @elabs-ai/components-tokens @elabs-ai/components-uiPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui Slider component (from @elabs-ai/components-ui) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look Slider up before writing code: `npx -y @elabs-ai/components-cli docs Slider` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-ui is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Labelled
The name has to land on the THUMB — that is the element with `role="slider"`. `aria-label` (or `aria-labelledby`, for a visible `<Label>`) is routed there.
Custom Value Text
A replay scrubber announces "step 3 of 12" instead of the bare numeric value — `aria-valuetext` on `thumbProps` (or the top-level `aria-valuetext` shorthand) lands on the thumb, the element that actually carries `role="slider"`.
Range
A range slider (array `defaultValue`) renders one thumb per value. Passing an ARRAY to `thumbProps` (#398) gives each thumb its own accessible name and `aria-valuetext` — a top-level `aria-label`/`aria-valuetext` would apply identically to both thumbs, which isn't what a min/max range wants.
API
Slider
| Prop | Type | Description |
|---|---|---|
thumbProps | SliderThumbProps | SliderThumbProps[] | Escape hatch spread onto the thumb LAST — for `data-*`/`style`/etc, or to deliberately override `aria-label`/`aria-labelledby`/`aria-valuetext` (an explicit key here always wins over the matching top-level prop). The six keys that MAKE the element a slider are ignored on purpose: `role`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-orientation` and `tabIndex`. Radix derives every one of them from the slider's live state and spreads consumer props AFTER its own, so passing them here would silently destroy the widget (a wrong `aria-valuenow` mis-announces the value; `role`/`tabIndex` make it unreachable). Change the VALUE (`value`/`min`/`max`/`orientation`/ `disabled`) on `Slider` instead; use `aria-valuetext` to change how the value is spoken. Radix renders one thumb per element of `value`/`defaultValue` — pass a single object to apply the same props to every thumb (the historical single-thumb shape, unchanged), or an ARRAY to give each thumb its own props, indexed positionally against `value`/`defaultValue` (#398). A missing array slot falls back to no per-thumb override for that thumb. |