A better comparison slider for mobile
The comparison slider is one of the more useful components on this site. On mobile, it has two problems that quietly undermine the whole point of it.
- Role
- Designer + Developer
- Client
- Personal Project
- Date
- Mar 2026
- Tools
Visual Studio Code
Shadcn
Excalidraw
TL;DR
Where I started.The comparison slider lets you scrub between two states of a design and see the difference directly. On desktop it works well. On mobile, two interaction problems make it almost useless.
What I did. Moved the handle out of the content area, fixed the touch event handling, and rebuilt the component for the device people are actually reading this on.
What changed. The slider does what it's supposed to do. The thumb stops obscuring the comparison. The page stops fighting the gesture.
The problems
Desktop hides what mobile can't.
The first problem is thumb obstruction. When you drag the handle across the image, your thumb sits 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 second is scroll interference. The horizontal drag gesture competes with the vertical scroll of the page. The result is shaky and unpredictable. Feels broken even when it technically isn't.
Neither exists on desktop, where a cursor is precise and weightless. Mobile surfaces a whole category of issues that don't exist at cursor scale.
The fix
Separating the control from the content.
Moving the handle below the image removes the obstruction entirely. Your thumb operates in a dedicated zone, the full image stays visible, and the caption moves above so it stays 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. The answer was in the feedback. As long as the image responds in real time, the relationship is clear. The handle doesn't need to sit on the image to feel like it controls it.
What I took from it
Being both designer and user means the feedback loop is instant.
No test cycle to confirm what's already obvious. The catch is the inverse: easy to assume what works on your device works everywhere. A developer pointed out post-launch that the issues were iOS Safari-specific. The fix works on Android anyway, so a browser-specific improvement without a regression. Useful reminder that "mobile" isn't one thing, and that being your own user only takes you as far as your own device.
