# Image compare

> Two images of the same scene with a divider that reveals one over the other.

## Anatomy

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](/carousel.html.md).

![Before: a lilac panel](<data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Crect width='800' height='400' fill='%23c6a0f6'/%3E%3C/svg%3E>) ![After: a slate panel](<data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Crect width='800' height='400' fill='%23455a64'/%3E%3C/svg%3E>) 

```
<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 |