webdevpuneet.com

Related Snippets

63 in Heroes category
39–44 of 60

Before/After Hero with Comparison Slider

Split-Screen Hero with Embedded Signup Form

Hero with Social Proof Logo Strip

Typed.js Multi-String Hero

Typed.js Rotating Headline

tsParticles Interactive Hero

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

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

CategoryHeroes
TagsTouch GesturesKeyboard NavigationSVGGlassmorphismMedia Player

Copy & paste

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>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

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.

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 and video editing tools
Prove enhancement quality with a draggable divider, computed from live clientX rather than a timed animation.
Fitness and health transformations
Show results side by side in a hero, with Pointer Events and capture giving one code path for mouse, touch and stylus.
Home improvement services
Pair with a product hero section, using a role="slider" handle that works with arrow keys for accessibility.
Design and renovation agencies
Frame a portfolio piece as the headline proof, clamping the handle between 0 and 100% so it cannot leave the container.
AI image tools and beauty brands
Demonstrate an AI filter or upscaler's effect, or show skincare and beauty results without needing any video production budget.
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.