Slider
A draggable single- or range-value slider, horizontal or vertical. Pass an array default/value to get one thumb per value.
Overview
- `label`: names it above the track.
- `showValue`: prints the value (or range) beside it, formatted by
formatValue("200 pedidos") orformatOptions(currency, percent — also what screen readers announce). - `marks`: labelled stops under the track (
numberor{ value, label }). Clicking one moves the nearest thumb there and firesonChangeEnd, while the keyboard keeps using the thumb. - `limit`: caps the value below
maxValue(stock left, plan quota). The scale and marks still run tomaxValue, the track above the limit is drawn as unavailable and its marks are disabled. - `description`: under the track, says why, and is read with the value.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/slider.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- cn@^0.5.0react-aria-components@^1.22.1
- Registry
- @fma-ds/label