<before-after>

Drop before-after.es.js next to your page and load it as a module. The element registers itself; there is nothing to initialise and nothing to import.

Download before-after.es.js latest release · no dependencies · all releases

<script type="module" src="before-after.es.js"></script>

<before-after
  before-src="raw.jpg"   before-alt="Straight out of camera"
  after-src="graded.jpg" after-alt="Colour graded"
  before-label="Original"
  after-label="Graded"
  value="50"></before-after>

Both panes accept arbitrary markup instead, via the before and after slots. Whatever is in them gets clipped, so the two sides should share the same geometry — same box, same padding, same line height — or the wipe will not line up.

<before-after>
  <div slot="before"><!-- any HTML --></div>
  <div slot="after"><!-- any HTML --></div>
</before-after>

Two code paths, same shape

Slotted HTML, no images. The panes here are two <pre> blocks padded to the same line count, so the divider reads as a single edit rather than two documents.

function loadProfile(id, cb) {
  fetchUser(id, function (err, user) {
    if (err) return cb(err);
    fetchPosts(user, function (err, posts) {
      if (err) return cb(err);
      fetchStats(user, function (err, stats) {
        if (err) return cb(err);
        cb(null, { user, posts, stats });
      });
    });
  });
}

async function loadProfile(id) {
  const user = await fetchUser(id);
  const [posts, stats] = await Promise.all([
    fetchPosts(user),
    fetchStats(user),
  ]);
  return { user, posts, stats };
}

Wiping down instead of across

orientation="vertical" moves the divider top to bottom; the before pane is the top one. Everything else — keys, events, parts — behaves identically.

Grab anywhere

grab="anywhere" allows the user to drag the divider from anywhere within the component, not just the handle.

Properties and events

Styling

For anything the custom properties do not reach, the shadow parts are exposed: frame, pane, before, after, divider, handle, label and image.

Keyboard

Worth knowing

• The handle is a real <button> carrying role="slider", so it is tabbable, announces its position, and works inside a form without submitting it.
• Panes are stacked in one grid cell, so the frame is as tall as the taller side and nothing is cropped by surprise.
• Clipping is clip-path on percentages — resizing the element needs no JavaScript and no re-measure.
• Pointer capture is taken on the frame, so a drag survives the pointer leaving the element.
• Keyboard moves are eased; pointer drags are not. Under prefers-reduced-motion nothing is eased.
• The divider position is a percentage of the frame, never a pixel offset, so it holds through layout changes and zoom.

This is the exact module running the demos above — the page reads its own script tag to fill the listing, so what you copy is what you just used.