Ravox KitForms
Slider
Pick a number or a range by dragging: one or two thumbs, step, labeled marks, visible value and tooltip. Arrows, PageUp/PageDown and Home/End on each thumb; sends the value with name and works in React Hook Form's Controller.
Arredondamento dos cantos
Settings
Toggles
Examples
Price filter in a plain form
With React Hook Form
Save only on release
Volume do alerta de venda
Salvo: 60%
No visible label
Installation
The command creates components/ui/slider.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add sliderProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | [number, number] | — | Current value (controlled) or initial value. A pair becomes a range with two thumbs. |
| onValueChange | (value) => void | — | On every step, dragging or by keyboard. |
| onValueCommit | (value) => void | — | When the thumb is released or the key press ends: good for saving or fetching. |
| onBlur | () => void | — | When focus leaves the slider (the Controller's onBlur). |
| min / max / step | number | 0 / 100 / 1 | Limits and the size of each step (accepts decimals). |
| marks | boolean | (number | { value, label? })[] | — | true: one mark per step (up to 21). Or the values, with a label below when there is one. |
| label | ReactNode | — | Label wired to the thumbs (aria-labelledby). Without it, pass aria-label. |
| hint / error | ReactNode | — | Note below. The error colors the track and thumbs, sets aria-invalid and is read along with them. |
| showValue | boolean | true | Formatted value next to the label. |
| tooltip | boolean | false | Tooltip with the value above the thumb while dragging or focused. |
| format | (value: number) => string | — | How the value appears and is read by the screen reader (aria-valuetext). |
| thumbLabels | [string, string] | ["minimum", "maximum"] | Name of each thumb in a range, for screen readers. |
| name | string | — | Sends the value in an <input type="hidden">; in a range, two with the same name. |
| disabled | boolean | false | Blocks dragging and keyboard and does not send the value. |
| ref | Ref<HTMLInputElement> | — | Goes on the input (native range) of the first thumb: the Controller focuses it on error. |