A better comparison slider for mobile
The standard comparison slider works well on desktop. On mobile, two problems get in the way. Here's how I fixed them.
Visual Studio Code
Shadcn
Excalidraw
The comparison slider is one of the more useful components on this site. It lets you scrub between two states of a design and see the difference directly. On desktop it works well. On mobile, it has two problems that quietly undermine the whole point of it.
I noticed them while reviewing my own portfolio on my phone, fixed them, and documented the process here.
The problems
The first 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. It's 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 a shaky, unpredictable interaction that feels broken even when it technically isn't.
Neither of these problems exists on desktop, where a mouse cursor is precise and weightless. On mobile, the interaction needs a different approach entirely.
See for yourself
The solution
Control placement
Moving the slider handle beneath the image removes the obstruction entirely. Your thumb operates in a dedicated zone below the content, and the full image stays visible while you interact with it. The comparison does what it's supposed to do.
Caption placement
With the control moving below the image, the caption moves above it. This keeps the label readable at all times, regardless of where the handle sits.
The result is a cleaner separation between the content being compared and the mechanism driving the interaction. Each element has its own space.
Preventing scroll interference
Stopping the page from scrolling while the user is dragging requires 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 result
Reflection
The fix sounds simple in hindsight, but getting there involved a few rounds of sketching the interaction model. The main question was whether a detached slider would still feel connected to the image, or whether it would read as a separate, unrelated control.
The answer was in the visual proximity and the immediate feedback. As long as the image responds in real time to the slider position, the relationship is clear. The handle doesn't need to be on the image to feel like it controls it.
This kind of problem is easy to miss during design and build, because you're mostly working on desktop. Mobile testing surfaces a whole category of issues that just don't exist at cursor scale.
The broader principle: drag interactions on mobile need to account for the thumb as an object that takes up space and blocks what's behind it. Designing the control zone separately from the content zone is often the right call.
There's more that could be done here. A tap-to-advance interaction as an alternative to dragging, better touch target sizing, or haptic feedback at the midpoint. For now, the core problem is solved.
