A .image-compare stacks two images of the same scene
with a divider that reveals the second over the first.
Put two <img> elements and a native
<input type="range"> inside it. Give each image
alt text that says which one it is, and give the range a name. The
range is the control. Arrow keys, dragging and taps work as they do
on any slider, and screen readers hear its value. The range sits
invisibly over the images, and the ImageCompare
behavior moves the divider to its value. For several unrelated
images, use a carousel.
<div class="image-compare">
<img src="before.jpg" alt="Before: the faded original photo" width="800" height="500">
<img src="after.jpg" alt="After: the restored photo" width="800" height="500">
<input type="range" min="0" max="100" value="50" aria-label="Compare before and after">
</div>Tokens
| Token | Default |
|---|---|
--md-comp-image-compare-position |
50% (written by the behavior) |
--md-comp-image-compare-shape |
16px |
--md-comp-image-compare-divider-color |
--md-sys-color-surface |
--md-comp-image-compare-handle-size |
40px |