Image Compare
Stacks two images in layers and uses a draggable vertical handle to clip the "after" layer, revealing more or less of it as the position changes. Use it for side-by-side visual comparisons, such as photo editing, before/after of renovations, or design tweaks. Each instance has an agent-native layer: it mirrors the live state in data-pura-* attributes and registers itself in window.__puraImageCompares by its data-pura-id, letting agents read and drive the comparison without touching the DOM.
Preview
<pura-image-compare value="50" label="Before and after renovation comparison">
<img slot="before" src="/img/antes.jpg" alt="Before the renovation">
<img slot="after" src="/img/depois.jpg" alt="After the renovation">
</pura-image-compare>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | 50 | Handle position from 0 to 100. 0 shows only the 'before' image, 100 shows only the 'after'. Reflected back to the host attribute. |
label | string | Before/after comparison | Accessible label for the slider, applied as aria-label on the handle. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/image-compare.js"></script>import "./pura/lib/image-compare.js";