Slider
A number you drag.
Default
One handle between 0 and 100.
One handle for a value, two for a range. The arrow keys move by one step, Home and End jump to the ends, and the whole track is clickable — the handle goes where you click.
Installation
npx philcn@latest add sliderThe file is written into your project. It is yours from then on — change it as you like.
Examples
A range
Two handles that cannot cross, and a value you hold yourself.
20 to 70
Props
| Prop | Type | What it does |
|---|---|---|
| Slider.value | number[] | Controlled. Always an array, even with one handle. |
| Slider.defaultValue | number[] | Uncontrolled: where the handles start. |
| Slider.onValueChange | ((value: number[]) => void) | Called on every movement, while dragging. |
| Slider.onValueCommit | ((value: number[]) => void) | Called once, when the handle is let go. Use this one to save or to fetch. |
| Slider.min | number | The low end. 0 by default. |
| Slider.max | number | The high end. 100 by default. |
| Slider.step | number | How far one arrow key press moves. |
| Slider.minStepsBetweenThumbs | number | How many steps two handles must keep between them, so they cannot cross or overlap. |
| Slider.orientation | "horizontal" | "vertical" | Horizontal or vertical. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.