A better comparison slider for mobile
Where 'mobile' turned out to be iOS Safari, with one fix that didn't regress on Android
- Who
- Personal ProjectMar 2026
- Scope
- Component designFrontend engineering
- Tools
Visual Studio Code
Shadcn
Excalidraw
Context
A useful desktop component that quietly fell apart on mobile
The comparison slider lets you scrub between two states of a design and see the difference directly.
The problems
Thumb obstruction and scroll interference, neither of which exists on desktop
Dragging the handle across the image puts your thumb directly over the area you're trying to evaluate. The comparison you're making is hidden by your own hand. A fundamental conflict between the control and the content.
The horizontal drag gesture competes with the vertical scroll of the page, and the result is shaky and unpredictable, feeling broken even when it technically isn't.
Neither exists on desktop, where a cursor is precise and weightless, while mobile surfaces a whole category of issues that don't exist at cursor scale.
The fix
Moving the handle out of the image, with one line of code to stop the scroll fight
Your thumb gets a dedicated zone, the full image stays visible, and the caption moves above the image so it's readable wherever the handle sits. Content above, control below, label up top. Each element has its own space.
Stopping the page from scrolling while dragging needs one explicit instruction: passive: false. Without it, the browser handles the touch event before your code can, and the page moves anyway.
comparison-slider-block.tsx
The question during sketching was whether a detached handle would still feel connected to the image, and the answer was in the feedback. As long as the image responds in real time, the relationship is clear, and the handle doesn't need to sit on the image to feel like it controls it.
Outcome
The slider now works on mobile, with the iOS Safari fix landing regression-free on Android
The thumb stops obscuring the comparison, and the page stops fighting the gesture. A developer pointed out post-launch that the issues were iOS Safari-specific, and the fix works on Android anyway, so a browser-specific improvement without a regression.
