You can use a11y-compare-image web component to compare two images. Here’s how:
The image on the top or when slider is moved all the way to the right is the Matterhorn on a cloudy day without snow. As you move the slider to the left, the image below it reveals the Matterhorn on a clear day with snow.
<p>The image on the top or when slider is moved all the way to the right is the Matterhorn on a cloudy day without snow</span>. As you move the slider to the left, the image below it reveals the <span id="snowy">Matterhorn on a clear day with snow</span>.</p>
<a11y-compare-image>
<img aria-describedby="cloudy" src="https://webcomponents.psu.edu/styleguide/elements/a11y-compare-image/demo/images/Matterhorn01.png" alt="Matterhorn without snow" slot="top">
<img aria-describedby="snowy" src="https://webcomponents.psu.edu/styleguide/elements/a11y-compare-image/demo/images/Matterhorn02.png" alt="Matterhorn with snow" slot="bottom"</p>
</a11y-compare-image>
This version fades the top image as the slider is moved.
<a11y-compare-image opacity>
<img aria-describedby="cloudy" src="https://webcomponents.psu.edu/styleguide/elements/a11y-compare-image/demo/images/Matterhorn01.png" alt="Matterhorn without snow" slot="top">
<img aria-describedby="snowy" src="https://webcomponents.psu.edu/styleguide/elements/a11y-compare-image/demo/images/Matterhorn02.png" alt="Matterhorn with snow" slot="bottom"</p>
</a11y-compare-image>
Learn more about how to customize it at https://webcomponents.psu.edu.
