React Slider
Range inputs the forms layer was missing: a single-thumb Slider and a dual-thumb RangeSlider for min/max windows. Both are pointer- and keyboard-driven (arrows step, Shift+arrow jumps a decade, Home/End snap to the ends) with full role="slider" ARIA, an optional value bubble while dragging, tick marks, and a mono readout. Drives pricing calculators, spec filters, and settings alike — the demo wires a seat count to a live price estimate.
Estimated: $390/yr
Ticks at each 10°.
400 MHz1200 MHz
400–1200 MHz
Installation
npx shadcn@latest add "http://localhost:3000/registry/slider.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number / [number,number] | — | Controlled value (Slider / RangeSlider) |
| onChange | callback | — | Value change |
| min/max/step | number | 0/100/1 | Range and increment |
| format | (v: number) => string | — | Readout / bubble label |
| ticks | boolean | false | Slider tick marks (small ranges) |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.