Image Compare Slider: before and after in one picture

How to use it

1. Add the two files

<link rel="stylesheet" href="compare.css">
...
<script src="compare.js"></script>

2. Put two images in a box

The first image is the "before" side on the left. The second is the "after" side on the right.

<div class="cmp" data-compare>
  <img src="before.jpg" alt="Kitchen before the renovation">
  <img src="after.jpg"  alt="Kitchen after the renovation">
</div>

3. Add labels and a start position

<div class="cmp" data-compare
     data-compare-start="35"
     data-compare-before="Before"
     data-compare-after="After">
  <img src="before.jpg" alt="Before">
  <img src="after.jpg"  alt="After">
</div>

All options

Change the look

The handle uses CSS variables. Set them on the box or for the whole site.

.cmp {
  --cmp-line: #22d3ee;   /* colour of the line and the knob */
  --cmp-knob: 56px;      /* size of the knob */
  border-radius: 0;      /* square corners */
}

Prepare your pictures

• Use the same proportions for both. The first image sets the size of the box. The second one is stretched to cover it.
• Take both photos from the same spot. The effect only works when the pictures line up.
• Add width and height to the img tags. Then the page does not jump while the pictures load.
• Write real alt texts. They help Google Images and screen reader users.

Move it from your own code

You can set the position from a button, and you can listen for changes.

var box = document.querySelector('.cmp');
ImageCompare(box).set(80);

box.addEventListener('compare:change', function (e) {
  console.log(e.detail.value);   // 0 to 100
});

Touch and keyboard

• On phones the page still scrolls. A sideways drag moves the divider, an up or down swipe scrolls the page.
• The handle is a real slider for the keyboard. Tab to it, then use the arrow keys. Shift makes bigger steps, Home and End jump to the edges.
• Screen readers hear it as a slider with a value from 0 to 100.

Common questions

Does it work in WordPress?

Yes. Add the two files to your theme, then paste the HTML into a Custom HTML block. Use the image URLs from your media library.

Can I use more than one on a page?

Yes. Every box with data-compare works on its own.

Can I compare two colour versions of the same photo?

Yes. Use the same file twice and put a CSS filter on one of them, for example filter: grayscale(1). The demo above does exactly that.

What is in the download

• compare.js the script, about 3 KB
• compare.css the look of the handle and labels, about 2 KB
• before.svg, after.svg the two demo pictures
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.