Skip to main content

advance-scroll-input

A touch-friendly React number input with a roller scrubber, unit-aware parsing and a formula engine. Drag it, or just type 10ft.

Drag the roller. Or type 10ft, 5' 6", (190*120)/144.
Get startedGitHubnpm

npm install @jugaaadi/advance-scroll-input

Roller scrubber

Drag the field or the roller to scrub. Physics-based detents mean a value always lands on a whole step.

Types like a human

10ft, 123", 5' 6", 1 1/2 in, 45cm, 96px. Stored canonically in millimetres, so switching units loses nothing.

Formulas, no eval()

(190*120)/144, 1m+500mm, 100 * length. A real parser with real precedence, live validity and syntax highlighting.

Touch-first

Pointer capture, 44px targets on coarse pointers, and a vertical drag scrubs instead of scrolling the page.

106 CSS variables

Every colour, size, weight and timing is a token. Restyle without fighting a single selector.

Two builds

A plain-CSS build that works anywhere, and a Tailwind build with no stylesheet. Same API.


Built for people who cut material

The audience is designers, carpenters and CAD operators — not programmers. A plausible-but-wrong number is far more dangerous than a visible error, because someone will trust a bad dimension and cut to it. So the formula engine rejects bitwise operators and ^ outright rather than returning a number nobody expects. Powers are pow(2,10), spelled out.

Provided as is, without warranty. Verify your own numbers — this is a UI input, not a certified measurement tool.