<before-after>

A tiny before/after image comparison slider. One custom element, zero dependencies, about 4KB. Drop in two images, drag the handle, done.

It's the same slider that runs on imgi.co, pulled out into a standalone web component you can host yourself. If you'd rather not host anything, imgi gives you the slider on a permanent link with a copy-paste embed and animated (GIF/MP4) export.

Install

npm install before-after-slider

Or straight from a CDN, no build step:

<script type="module" src="https://unpkg.com/before-after-slider"></script>

Use it

<before-after
  before="original.jpg"
  after="edited.jpg"
  before-label="Before"
  after-label="After"></before-after>

That's the whole API for the common case. Two images, drag to compare.

Attributes

Attribute	What it does
before	URL of the image shown on the left/bottom (the base).
after	URL of the image revealed as you drag.
before-label / after-label	Optional captions in the corners. Leave them off for a clean look.
start	Starting handle position, 0 to 100. Default 50.
orientation	horizontal (default) or vertical.
alt-before / alt-after	Alt text for each image. Set these.

Set value in JS to move the handle, and listen for change:

const el = document.querySelector("before-after");
el.value = 30;
el.addEventListener("change", (e) => console.log(e.detail.value));

Styling

The handle line, focus ring and corner radius are CSS variables, so you can theme it from the outside:

before-after {
  --ba-line: #fff;      /* the divider and grip */
  --ba-focus: #60a5fa;  /* keyboard focus ring */
  --ba-radius: 12px;
}

Accessibility

The handle is a real focusable slider. Tab to it, then arrow keys nudge it (hold Shift for bigger steps), Home and End jump to the ends. Works with mouse, touch, and pen through pointer events. It won't hijack vertical scroll on a phone.

Why this exists

I built imgi because the before/after tool a lot of us relied on went offline, and I wanted comparison links that don't rot. The slider was never the hard part of that, so there's no reason to keep it locked up. Take it, ship it, no attribution required.

If you want the hosted version, with permanent links, albums, and GIF/MP4 export, it's at imgi.co.

License

MIT.