Precise & Draggable Numeric Input Control

The Number Scrubber components adds precise numeric input control to your React & shadcn/ui applications. It draws inspiration from the smooth, interactive controls found in professional video editing software Resolve. You can adjust values by dragging horizontally, with fine-grained control over sensitivity and bounds.

Built specifically for the shadcn/ui ecosystem, the Number Scrubber integrates smoothly with existing shadcn components while maintaining consistent styling. The component handles various numeric input scenarios, from basic integer counting to decimal-precise adjustments.

GitHub Repo

Live Demo

Features

🖱️ Click-and-drag horizontal value adjustment.

📊 Configurable minimum and maximum bounds.

🎨 Matches shadcn/ui design patterns.

🎯 Fine/coarse control sensitivity settings.

⚡ Adjustable step sizes for precise control.

📝 Full TypeScript support.

Use Cases

Video Editing Controls: This component could precisely adjust parameters like brightness, contrast, or saturation, mirroring the functionality of desktop software.
Design Tool Sliders: In a web-based design tool, users could adjust element properties like opacity, scale, or rotation with granular control. The draggable interface allows for immediate visual feedback.
Data Visualization Filters: Users can interactively filter data ranges in dashboards or data exploration tools. Dragging the scrubber provides an easy way to refine the displayed information.
Game Development Parameters: For in-browser game development tools, designers could use this component to tweak physics properties like gravity or velocity, offering immediate visual feedback in the game environment.
Financial Input Fields: When dealing with financial applications, this component can enhance the input of numerical values, such as setting investment amounts or adjusting budget allocations with specific increments.

Installation

To integrate this component into your project, use the shadcn CLI:

npx shadcn@latest add https://raw.githubusercontent.com/camwebby/shadcn-react-number-scrubber/refs/heads/main/public/registry/number-scrubber.json

FAQs

Q: What’s the difference between fine and coarse control?
A: Fine control offers smaller value changes for precise adjustments, while coarse control allows faster value changes when dragging.

Q: Can I customize the step size for different scenarios?
A: Yes, you can set custom step sizes through the step prop, supporting both integer and decimal values.

Q: Does it work with both mouse and touch inputs?
A: The component supports both mouse and touch interactions for drag operations.