built by @forkthis_ai
a slider you
can feel.
Drag it on your phone and it clicks at every whole number. Then copy the same slider into your own web app. A free remake of a haptic slider design by Max Yan.
What works
0.1 steps with a detent at each whole number. Tap anywhere on the track to jump.
It lifts when you grab it, stretches past the ends and springs back.
Android vibrates on every detent. iPhone may tick when you tap the cap. Optional click sound, and a visual pop everywhere. The page tells you what your device will do.
Words, range, step, colour and two cap drawings, with a live preview.
Copy React or Copy HTML, or download detent.js: one file, no dependencies.
A QR code opens your exact slider on your phone. Keyboard, ARIA, dark mode and reduced motion included.
Not yet
- Not tested on a real iPhone or Android phone yet, so no promise of per-number haptics on iPhone.
- No npm package, Vue or Svelte wrappers, vertical or two-thumb sliders.
- No screen reader walkthroughs beyond the ARIA attributes.
Run it yourself
git clone https://github.com/VedSoni-dev/detent cd detent && npm install && npm run dev
Or drop detent.js into any page. Try it at frontend.vedantsoni.com/slider.