About Numbers Flow
Number Flow Progress – Rolling Number Slider for Progress
An interactive progress component that pairs a large odometer-style number with a minimal slider underneath. Each digit rolls smoothly to its new value as you drag, click, or use the keyboard, and the track fills in the same color as the number.
What you get:
Component URL
Framer component with editable property controls
Rolling digit-by-digit number animation with soft edge fade
Draggable slider with click-to-jump, animated thumb, and press scale
Active track and thumb that automatically follow the value color
Separate font controls for the label and the value, including line height and letter spacing
Prefix and suffix support, such as $, %, or any custom text
On Change event for connecting the value to other elements
Customizable:
Value: set the starting value, minimum, and step size, plus prefix and suffix
Typography: choose a font for the value and a separate font for the label
Colors: set the value color, label color, and inactive track color
Label: show or hide it and edit the text, font, and color
Track: adjust the track height, thumb size, and thumb press scale
Layout: one spacing control sets the vertical gap between the label, number, and slider
Good to know:
Code component for Framer, not a standalone download
The slider scale runs from your minimum up to 100
Fully keyboard accessible with arrow keys, Page Up/Down, Home, and End
Interaction is disabled on the Framer canvas and works in preview and on the published site
License: Unlimited personal and client projects. No resale or redistribution.
Refunds: Due to the digital nature of this product, all sales are final, and refunds will not be issued. Please ensure you review all product details carefully before purchasing. If you have any questions or need further clarification, feel free to reach out before completing your purchase.
Questions? support@russetsupply.com
