Slider
v1.0.4Updated 27 Aug 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 · 14 storiesDefaultOpen ↗
▸Why this is recommendedformrangeslidernumeric+2
The default, out-of-the-box Slider.
Recommended for+14
- ✓Volume / brightness
- ✓Price range filter
- ✓Settings with bounded numeric
- ✓Image / colour adjustment
Tags+6
formrangeslidernumericmarksdefault
Features+4
- Single / range
- Step quantization
- Keyboard control
- Marks with labels
- Hover value bubble
- Paired numeric inputs
- Tonal variants (primary / success / warning / destructive)
Not recommended for−2
- ✕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
PropTypeRequired
valueCurrent values
—onValueChangeValue change callback
—minMinimum value
—maxMaximum value
—marksMark positions + labels
—showValueBubbleShow hover value bubble
—showInputsShow paired numeric inputs
—toneColour tone
—Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.