Accessible <image-compare> Web Component (no Shadow DOM)

• Using Light DOM allows you to style everything with regular CSS
• Horizontally scrollable container used as fallback if JS doesn't load (this also helps reduce CLS by stabilizing the overall height)
• No dependencies

Demo

https://codepen.io/nonsalant/pen/gbYRJKd

Usage

1. Grab the files from the src folder.

2. Load the style and the main script (adjust the paths as needed):

<link rel="stylesheet" href="../src/image-compare.css">
<script src="../src/image-compare.js" type="module"></script>

3. Use it like this:

<image-compare>
    <img src="before.jpg" alt="" width="" height="">
    <img src="after.jpg" alt="" width="" height="">
</image-compare>

Options

Control how much of the first image is shown initially by adding an exposure attribute with a value between 0 and 100.

• 0 means the first image is completely hidden.
• 100 means the first image is fully visible.
• 50 means both images are half-shown, half-hidden.

E.g: <image-compare exposure="0">

Credits

• Forked from: image-compare by Paul Hebert for Cloud Four, which uses the Shadow DOM.
• Inspired by this article: Light-DOM-Only Web Components are Sweet by Chris Coyier.