design-infraReport a problem or share feedback← Catalog
Scrub Number Field
curatedfreemicrokit/scrub-number-field
A number field you drag to scrub and click to type, with a ruler that tracks the gesture.
$
npx shadcn@latest add https://microkit.co/r/scrub-number-field.jsonOur notes
Figma-style scrubbable number input: drag horizontally to change the value (Shift ×10, Alt ×0.1, re-based mid-drag), click to type, a ruler tracks the gesture and the field nudges at its bounds (keyframe disabled under reduced motion). Pointer capture, no deps. Min/max (0–100) and colours are hard-coded constants — lift them into props. Settings panels and design-tool UIs.- Source
- MicroKit
- Kind
- component
- Categories
- input
- Use as
- recipe — technique you apply to your own markup
- Applies to
- inputform
- Motion
- on drag, state · subtle · css + js · low cost · respects reduced motion
- Tags
- css, drag, hard-coded-colours
- Licence
- MIT ("MIT License — Copyright (c) 2026 Henrique Barone", github.com/henriquegpb/microkit). README credits note that some interactions are adapted from publicly shared examples and Webflow exports.
- Live demo
- microkit.co
- Docs
- microkit.co
Similar
Compare all 4 →- File Uploadaceternity/file-uploadDrag-and-drop upload with grid background and micro-interactions.
- Gooey Inputaceternity/gooey-inputA search-style input that expands with a gooey SVG filter and shared layout animation
- Clerk: Conditional Fieldmotion/clerk-conditional-fieldA password field that animates into a sign-in form only when it's needed. The container animates its measured height with Motion's resize() util while the field fades in.