Source Code

<section class="bah-hero">
  <div class="bah-copy">
    <span class="bah-eyebrow">Real results, real fast</span>
    <h1 class="bah-h1">See the transformation<br>for yourself</h1>
    <p class="bah-sub">Drag the handle to compare before and after. This is the same photo, the same lighting — only our one-click enhance is different.</p>
    <a href="#" class="bah-cta">Try it free</a>
  </div>

  <div class="bah-compare" id="bahCompare">
    <div class="bah-after">
      <span class="bah-tag bah-tag-after">After</span>
    </div>
    <div class="bah-before" id="bahBefore">
      <span class="bah-tag bah-tag-before">Before</span>
    </div>
    <div class="bah-handle" id="bahHandle">
      <span class="bah-handle-grip">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
      </span>
    </div>
  </div>
</section>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Before/After Hero with Comparison Slider — Free HTML CSS JS Snippet

Before/After Hero with Comparison Slider · Heroes · Plain HTML, CSS & JS · Live preview

TagsTouch GesturesKeyboard NavigationSVGGlassmorphismMedia Player

What's included

Features

Real pointer-tracked drag
Position computed from live clientX, not a timed animation.
Pointer Events + capture
One code path for mouse, touch, and stylus.
Keyboard accessible
role="slider" with arrow-key support.
Clamped 0-100% range
The handle can never leave the container.
CSS-gradient placeholders
Swap for real <img> tags with zero JS changes.
Grip icon handle
Clear affordance with dual-direction arrows.
Framed as a hero
Headline and CTA give the comparison purpose.
Responsive container
aspect-ratio keeps proportions at any width.

About this UI Snippet

Before/After Hero with Draggable Comparison Slider

Screenshot of the Before/After Hero with Comparison Slider snippet rendered live

Photo editing tools, fitness apps, home-improvement services, and design agencies all share the same problem: how do you prove a transformation in a hero section without a video? This snippet answers it with a real draggable before/after slider as the primary visual — not a CSS animation that plays on a timer, but a handle whose position is computed live from the pointer's actual coordinates.

Pointer-tracked drag, not a scripted animation

The core interaction is in setPosition(): on every pointermove while dragging, it reads the comparison container's getBoundingClientRect(), subtracts the pointer's clientX from the container's left edge, and divides by the container's width to get a real 0–100% position — clamped so it never leaves the container. That percentage directly sets the "before" layer's width and the handle's left, so the reveal line follows the cursor exactly, frame by frame, rather than interpolating toward a fixed target.

Pointer Events, not separate mouse/touch handlers

The slider uses pointerdown/pointermove/pointerup with setPointerCapture(), which routes all subsequent pointer events to the container even if the cursor moves faster than the handle and briefly leaves its bounds — the standard technique for a drag handle that must not "lose" the pointer mid-drag, and it works identically for mouse, touch, and stylus input without extra code paths.

Keyboard-accessible by design

The handle carries role="slider", tabindex="0", and aria-value* attributes, with a keydown listener that moves the position 5% per arrow-key press. A comparison slider that only works by mouse drag locks out keyboard and switch-device users entirely — this one is a real slider control, not just a mouse toy.

Two CSS-gradient "photos"

Rather than requiring real before/after image assets to demo the pattern, both layers are CSS gradients — a desaturated, dimmed "before" gradient and a vivid "after" gradient — explicitly built so you can drop in real <img> elements (object-fit: cover) in place of the gradients without touching the drag logic at all, since the JS only ever manipulates the before layer's width.

Framing it as a hero, not a widget

The comparison sits below a headline, subheading, and CTA that frame *why* the transformation matters, rather than just embedding a bare slider — the copy tells the visitor what they're about to prove to themselves by dragging.

Customizing it

Replace the gradient layers with real <img> elements, adjust the aspect-ratio to match your image dimensions, or swap the horizontal drag for a vertical one by tracking clientY/height instead. Pair it with image comparison slider for a non-hero variant, or product hero if you need a more conventional layout alongside it.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Instead of guessing at the drag math, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how setPosition() converts a raw pointer clientX into a clamped 0-100% width using getBoundingClientRect(), and why setPointerCapture() matters for a drag handle that can move faster than the pointer's hit area. The same assistant can help you harden it further — ask whether the keyboard arrow-key step size should be configurable, or whether a double-tap on mobile should snap the handle to 50%. It's also useful for extending the pattern: ask it to convert the horizontal drag to a vertical one, add a subtle auto-play mode that sweeps the handle back and forth when the hero first loads (pausing on the first real user interaction), or wire real <img> elements in with a loading skeleton. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a hero section in plain HTML, CSS, and vanilla JavaScript centered on a real draggable before/after image comparison slider (no library, no CDN).

Requirements:
- A hero with headline, subheading, and CTA button above a comparison container roughly 16:9, containing two full-size layers (an "after" layer as the base and a "before" layer clipped on top by width) plus a vertical handle line with a circular grip in the middle showing a left/right arrow icon.
- The comparison position must be computed live from actual pointer coordinates: on pointerdown/pointermove within the container, read the container's real bounding rect via getBoundingClientRect(), compute the pointer's horizontal position as a percentage of the container's width, clamp it between 0 and 100, and set that percentage as both the before layer's width and the handle's left position — do not animate toward a fixed target or use a CSS-only animation that ignores pointer input.
- Use Pointer Events (pointerdown/pointermove/pointerup/pointercancel) with setPointerCapture so the same code path handles mouse, touch, and stylus, and so a fast drag doesn't lose tracking of the pointer.
- Make the handle keyboard accessible: give it tabindex, role="slider" with appropriate aria-value attributes, and a keydown listener that moves the position by a fixed percentage on ArrowLeft/ArrowRight.
- Use plain CSS gradients (not real image files) for the two comparison layers so the demo is self-contained, but structure the markup so real <img> elements could be dropped in without touching the JavaScript logic.
- Initialize the handle at the 50% position when the page loads.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe hero renders with the handle centered at 50%.
  2. 2
    Drag the handlePress and drag horizontally — the before/after boundary follows your cursor exactly.
  3. 3
    Try the keyboardTab to the handle and press the left/right arrow keys to move it 5% at a time.
  4. 4
    Swap in real imagesReplace the .bah-before and .bah-after gradient backgrounds with <img> elements.
  5. 5
    Adjust the aspect ratioChange aspect-ratio on .bah-compare to match your image dimensions.
  6. 6
    Edit copy and CTAUpdate the eyebrow, headline, subheading, and button link.

Real-world uses

Common Use Cases

Photo/video editing tools
Prove enhancement quality with a real drag demo.
Fitness and health apps
Show transformation results front and center.
Home improvement services
Pair with product hero sections.
Design/renovation agencies
Frame a portfolio piece as the hero visual.
AI image tools
Demonstrate a filter or upscaler's effect live.
Skincare and beauty brands
Show results without video production cost.
Related: Hero with Auto-Rotating Background Carousel
See the Hero with Auto-Rotating Background Carousel for a related heroes pattern worth pairing with this one.
Related: Typed.js Rotating Headline
See the Typed.js Rotating Headline for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

On pointermove, setPosition() calls compare.getBoundingClientRect() to get the container's live position and width, subtracts the container's left edge from the pointer's clientX, and divides by the container's width to get a percentage — clamped between 0 and 100. That percentage sets both the before layer's width and the handle's left, so the boundary tracks the actual cursor position every frame rather than animating toward it.

Yes. The slider uses Pointer Events (pointerdown, pointermove, pointerup) rather than separate mouse and touch listeners, and setPointerCapture() ensures the drag keeps tracking the same pointer even if it moves quickly — this single code path covers mouse, touch, and stylus input identically.

Yes. The handle has tabindex="0", role="slider", and aria-value* attributes, and a keydown listener moves the position 5% per ArrowLeft/ArrowRight press with aria-valuenow kept in sync — so it's usable without a mouse, not just a drag-only toy.

Add <img> elements (with object-fit: cover; width/height: 100%) inside .bah-after and .bah-before in place of the gradient backgrounds, keeping the same wrapper divs and IDs. The JavaScript only ever changes before's width and handle's left — it has no dependency on what's rendered inside those layers.

Yes — track clientY and rect.top/rect.height instead of clientX and rect.left/rect.width in setPosition(), set height instead of width on the before layer, and adjust the CSS handle line to be horizontal (top/bottom auto, left/right: 0) instead of vertical.