Implement innovative drag-to-adjust interaction in visual comparison view:
Visual feedback:
- Cursor changes to grab/grabbing when draggable
- Active bar scales up and shows ring focus indicator
- Hover overlay displays "Drag to adjust" hint
- Smooth transitions when not dragging, instant updates while dragging
Drag mechanics:
- Mouse drag support for desktop
- Touch drag support for mobile devices
- Logarithmic scale conversion preserves intuitive feel
- Clamped percentage range (3-100%) prevents invalid values
- Dragging updates input value and selected unit in real-time
Technical implementation:
- Added onValueChange callback to VisualComparison component
- Reverse logarithmic calculation converts drag position to value
- Global event listeners for smooth drag-outside-element tracking
- Prevents scrolling during touch drag on mobile
- MainConverter integrates drag callback to update state
This creates a highly tactile, visual way to adjust conversion values
by directly manipulating the bar chart representation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Sebastian Krüger
2c621f2c8e