Slider
v1.0.8Updated 4 Oct 2026Range slider control (Radix). Single or dual-thumb for numeric range input. Adds marks with labels, a hover value bubble, paired numeric inputs, and tonal variants.
Preview
Live · 15 stories▸Why this is recommendedformrangeslidernumeric+2
The default, out-of-the-box Slider.
- ✓Volume / brightness
- ✓Price range filter
- ✓Settings with bounded numeric
- ✓Image / colour adjustment
- Single / range
- Step quantization
- Keyboard control
- Marks with labels
- Hover value bubble
- Paired numeric inputs
- Tonal variants (primary / success / warning / destructive)
- Labelled by FormField: id and aria-* land on the thumbs (role=slider), never the root span; thumbs are named by the field label, a range as "<label> Minimum value" / "<label> Maximum value"
- ✕Precise numeric input (use Input type="number")
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueCurrent values
—onValueChangeValue change callback
—minMinimum value
—maxMaximum value
—marksMark positions + labels
—showValueBubbleShow hover value bubble
—showInputsShow paired numeric inputs
—toneColour tone
—thumbLabelsAccessible name per thumb, in order; wins over aria-label / a FormField label
—aria-labelNames the thumb (a range: the prefix of each thumb name)
—aria-labelledbyId(s) of the element(s) that label every thumb; wins over a FormField label
—idDOM id set on the first thumb; FormField clones its field id in, and its label then names the control
—aria-describedbyId(s) of hint or error text describing every thumb (FormField clones this in)
—aria-invalidMark every thumb invalid; FormField clones this in from its error prop
—aria-requiredMark every thumb required; FormField clones this in from its required prop
—Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.