Elastic slider
A native range input with give: drag past an end and the track stretches toward you, then springs back.
Volume
Features
- A native range input over a drawn track, so keys, screen readers and forms work as usual.
- Drag past an end and the track stretches toward the pointer like a rubber band (the give shrinks as you pull), then springs back.
- formatValue writes the value beside the label.
Use it for
- Scrubbing through results or steps.
- Volume, zoom, any bounded value.
On this site
- Research: strategic dropoutDrag through the suppression levels and watch the accuracy follow.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
label | string | Shown and read. |
min / max / step / value | number | As on a range input. |
onValueChange | (v: number) => void | Each change. |
formatValue | (v) => ReactNode | How the value reads. |
Accessibility
- It is a real input type=range with aria-valuetext from formatValue.
- Reduced motion drops the spring back.
Source
The code is in src/kit/elastic-slider.tsx in runets, MIT licensed.