Slider Captcha — Drag-to-Fit Puzzle Verification

A slider captcha asks the user to drag a slider until a puzzle piece slots into a gap — a low-friction, mobile-friendly alternative to typing distorted text that's familiar from many sign-in flows. This snippet builds the interaction (drag, fit-check, success and fail states, and a randomised target) in plain HTML, CSS, and vanilla JavaScript. It's a UX demonstration of the pattern, not a security control on its own.

Linked slider and puzzle piece

Dragging the handle moves a puzzle piece across a background image in lockstep: as the handle travels its track, the piece travels from its start to the target gap, scaled so the two ranges line up. This 1:1 mapping is what makes the task intuitive — you're not guessing, you're aligning, and the visual feedback tells you when you're close.

Randomised target and tolerance

On each attempt the gap is placed at a random horizontal position (40–85% across), so the solution differs every time. On release, the snippet checks whether the piece landed within a few pixels of the gap; within tolerance it shows a green "Verified" state, otherwise it flashes a red "Try again" and re-randomises after a moment. The tolerance makes it forgiving for touch while still requiring a deliberate, roughly-correct drag.

Pointer dragging for mouse and touch

The handle uses Pointer Events with document-level move/up listeners, so a drag keeps tracking even if the pointer leaves the track, and the same code drives mouse, trackpad, and touch. touch-action: none stops the page scrolling while dragging on a phone, and user-select: none prevents text selection mid-drag.

Clear states and reset

Success, failure, and idle each have distinct colours on the track and handle, and a Reset link re-arms the challenge. Because the verification result is a single boolean, it's trivial to gate a form submit on it — but note that client-side checks like this only deter casual bots; real protection requires server-side validation of the drag trajectory and timing, which this snippet leaves as the integration point.

Self-contained and responsive

The whole challenge recalculates its geometry on resize so it works at any width, and it's a couple of hundred lines with no dependencies — a clean reference for the slide-to-fit captcha interaction you can wire into a login or signup flow.