# Slider

> Picks a value along a range by dragging.

- **Level**: molecule · **Status**: stable · **Role**: input
- **Import**: `import { Slider } from "@rrios-forge/ui/molecules/slider";`
- **Source**: `packages/ui/src/molecules/slider`

Semantic value selector. Wraps `@radix-ui/react-slider`, so the ARIA contract
(`role="slider"`, `aria-valuemin/max/now`, arrow + page + Home/End navigation, RTL-aware orientation)
is right by construction. Pass one value for a single slider, two or more for a range —
Radix renders one Thumb per value.

Composition slots: `marks`, `showValue`+`formatValue` (value bubble),
`startAdornment`/`endAdornment`, and `gradient` for the filled range.
Hit area stays at 44 × 44 at every size via an invisible pseudo-element on each thumb.

## Use it for

- Date field / file drop / slider → `DateField` / `FileDropzone` / `Slider`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `orientation` | — | `horizontal` `vertical` | `horizontal` | The direction the parts run: a row (horizontal) or a column (vertical); responsive stacks on phones and runs in a row from sm. |
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `intent` | — | `primary` | — | What an action does. |
| `tone` | — | `neutral` `info` `success` `warning` `danger` | — | Which semantic colour family the element speaks in. |
| `visibility` | — | `always` `on-interaction` | `on-interaction` | When an affordance shows. |

## Stories

- [Playground](/?path=/story/components-molecules-slider--playground) · frame: `/iframe.html?id=components-molecules-slider--playground&viewMode=story`
- [Variants — tones](/?path=/story/components-molecules-slider--variants) · frame: `/iframe.html?id=components-molecules-slider--variants&viewMode=story`
- [Sizes](/?path=/story/components-molecules-slider--sizes) · frame: `/iframe.html?id=components-molecules-slider--sizes&viewMode=story`
- [States](/?path=/story/components-molecules-slider--states) · frame: `/iframe.html?id=components-molecules-slider--states&viewMode=story`
- [Range](/?path=/story/components-molecules-slider--range) · frame: `/iframe.html?id=components-molecules-slider--range&viewMode=story`
- [With marks](/?path=/story/components-molecules-slider--with-marks) · frame: `/iframe.html?id=components-molecules-slider--with-marks&viewMode=story`
- [Vertical](/?path=/story/components-molecules-slider--vertical) · frame: `/iframe.html?id=components-molecules-slider--vertical&viewMode=story`
- [With adornments](/?path=/story/components-molecules-slider--with-adornments) · frame: `/iframe.html?id=components-molecules-slider--with-adornments&viewMode=story`
- [With value bubble](/?path=/story/components-molecules-slider--with-value-bubble) · frame: `/iframe.html?id=components-molecules-slider--with-value-bubble&viewMode=story`
- [Gradient track](/?path=/story/components-molecules-slider--gradient-track) · frame: `/iframe.html?id=components-molecules-slider--gradient-track&viewMode=story`
- [In context](/?path=/story/components-molecules-slider--in-context) · frame: `/iframe.html?id=components-molecules-slider--in-context&viewMode=story`
- [RTL](/?path=/story/components-molecules-slider--right-to-left) · frame: `/iframe.html?id=components-molecules-slider--right-to-left&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).