Scrub number
A number field becomes a chip you drag sideways to change, with rubber-band ends and a fill for where the value sits; click it to type.
- enhancer
- input
- drag
- number
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Scrub number example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<div class="demo-row"><input type="number" value="24" min="0" max="64" aria-label="Radius" data-motion="scrub-number" data-motion-unit="px"> <input type="number" value="0.8" min="0" max="1" step="0.05" aria-label="Opacity" data-motion="scrub-number"> <input type="number" value="12" min="0" max="40" aria-label="Blur" data-motion="scrub-number" data-motion-unit="px"></div>import { ScrubNumber } from "./motion/react/ScrubNumber";
<ScrubNumber>Your content</ScrubNumber><script setup lang="ts">
import ScrubNumber from "./motion/vue/ScrubNumber.vue";
</script>
<template>
<ScrubNumber>Your content</ScrubNumber>
</template>const el = document.querySelector("#title");
el.dataset.motion = "scrub-number";The wrappers: ScrubNumber.tsx (React, TypeScript) and ScrubNumber.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-label | auto | Label in the chip (empty uses the field's aria-label) |
data-motion-unit | auto | Unit after the value |
data-motion-speed | 2.5 | Steps per 10 pixels of drag |
data-motion-color | #f6a04d | Fill and focus color |
Accessibility
The field stays a real number input with its own name: arrow keys, typing and screen readers work as before, and the chip's label and unit are aria-hidden. A press without a drag focuses the field and selects its value for typing; the focus ring is the chip's 2px outline. Dragging fires input events, and change when you let go. Reduced motion drops the spring back from the ends.
Size
scrub-number.js is 1.9 KB gzip, with text-kit.js 2.6 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.