Number Wheel
Number on a spinning wheel with neighboring values. Pro · Animated components › Code and numbers
A number on a turning drum, like a slot counter: neighbours above and below, and a change rolls through the numbers in between on a spring. Every frame is written straight to the DOM; the exact value is always in the accessible text.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add number-wheelnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { NumberWheel } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
value * | number | The number the wheel comes to rest on. | |
from | number | Number shown before the wheel first turns, e.g. 0 to roll up to value (default: value, no roll). | |
step | number | 1 | Difference between neighbouring numbers on the wheel (default 1). |
sideItems | number | 2 | Neighbours shown above and below the current number (default 2). |
itemSize | number | 35 | Height of one number, px (default 35). |
direction | 'btt' | 'ttb' | 'btt' | btt: higher numbers come up from below (default); ttb: they come down from above. |
min | number | Numbers below this stay blank, e.g. 0 for a count. | |
startOnView | boolean | false | Start turning only when the wheel scrolls into view (default false). |
delay | number | 0 | Pause before turning, ms (default 0). |
format | Intl.NumberFormatOptions | Intl.NumberFormat options for every number on the wheel. | |
locale | string | Locale for the numbers (default: the ThemeProvider's, then the browser's). |
Related components
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
- Todo List — Checklist with a wavy strike-through on done items
- Presence Avatars — Who’s online: avatars rearrange as status changes
- Radial Menu — Ring-shaped context menu on right-click
Previous: Code Tabs · Next: Pin List · All Animated components