Fast Accessible Image Comparison Web Component – image-compare

A lightweight, fast, accessible, mobile-friendly, and progressive enhancement image comparison web component written in JavaScript.

It enables the user to view the difference between two images with a vertical comparison slider that is built using the native HTML range input.

How to use it:

1. Download and import the image-compare.

<script src="src/index.js"></script>

2. Add after/before images to the image-compare component. That’s it.

<image-compare label-text="Compare two images.">
  <img
    slot="image-1"
    alt='Before Image'
    src="before.jpg"
    width="1600"
    height="900"
  />
  <img
    slot="image-2"
    alt='After Image'
    src="after.jpg"
    width="1600"
    height="900"
  />
</image-compare>