fma-ds

Slider

A draggable single- or range-value slider, horizontal or vertical. Pass an array default/value to get one thumb per value.

FormscustomizedMITChangelogRegistry JSON

Overview

  • `label`: names it above the track.
  • `showValue`: prints the value (or range) beside it, formatted by formatValue ("200 pedidos") or formatOptions (currency, percent — also what screen readers announce).
  • `marks`: labelled stops under the track (number or { value, label }). Clicking one moves the nearest thumb there and fires onChangeEnd, while the keyboard keeps using the thumb.
  • `limit`: caps the value below maxValue (stock left, plan quota). The scale and marks still run to maxValue, 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

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/slider

    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