Fathom
Range slider. One value or a range, on native range inputs that keep their keyboard and announce their unit.
- Component
- Range slider
- Pattern
- Native range inputs
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Fathom · React + TailwindFull width
| Keys | What happens |
|---|---|
| ← →or↑ ↓ | Move the focused handle by one step. |
| HomeorEnd | Jump to the bottom or the top of the scale. |
| Page UporPage Down | Move by a larger jump, as the browser decides. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/slider.json"Run it in your project root. It writes components/slider.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).