Author: | cloudfour |
---|---|
Views Total: | 245 views |
Official Page: | Go to website |
Last Update: | March 13, 2023 |
License: | MIT |
Preview:

Description:
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>