This is a heading

This is some text

Adding 1 sentence extra

Heading 18 Sep 2025

removed some text

Build a reusable HTML/CSS/JavaScript component that displays two images (a “before” and an “after” screenshot) in the same frame with a draggable slider handle to reveal more or less of each image.

Functional requirements:

• Accept two image sources: before_image_url and after_image_url.
• Render the images stacked on top of each other, perfectly aligned and responsive.
• Default state: slider positioned at 50% of the width (showing half before, half after).
• A visible handle (vertical bar) sits at the intersection of the two images and can be:
  • Dragged horizontally with mouse.
  • Dragged on touch devices (touch events).
  • Click or tap anywhere on the image area to move the slider to that position.
• As the handle moves, the visible portion of the “after” image adjusts smoothly, revealing more or less of it over the “before” image.
• The component must work in a normal static HTML page with no frameworks required

Technical implementation details:

• Use pure HTML, CSS, and vanilla JavaScript only.
• Use a single wrapper container, e.g. <div class="ba-wrapper">, containing:
  • The “before” <img>.
  • An absolutely positioned container for the “after” <img> that is visually clipped to represent the slider position.
  • A handle element centered at the slider position.
• Use either clip-path: inset(...) or a variable width on the “after” container to control how much of the “after” image is visible as the user drags.
• Add event listeners for:
  • mousedown / mousemove / mouseup for desktop.
  • touchstart / touchmove / touchend for mobile.
• Constrain the slider position between 0% and 100% of the wrapper width.
• Handle window resizes robustly by recalculating positions based on the current bounding rectangle of the wrapper.
• Prevent image dragging and selection (e.g. via CSS user-select: none; pointer-events: none; on images where appropriate).

Integration requirements:

Adding new text here