Media
Image compare
Two images in one frame with a handle between them. Drag it, press anywhere to jump there, or use the arrow keys. For before and after, edits, restorations and maps.
Installation
npx sinaui add image-compareCopy src/lib/ui/ImageCompare.svelte, with Icon.svelte and tokens.css. No dependencies.
Examples
Grayscale and color
Each side is a snippet, so it can be any image, picture or canvas.
A library in Basra, from al-Wasiti's Maqamat of al-Hariri, 1237.
<script lang="ts">
import ImageCompare from '#lib/ui/ImageCompare.svelte';
const src =
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/A_Library_in_Golden_Islamic_Age.jpg/960px-A_Library_in_Golden_Islamic_Age.jpg';
</script>
<div class="demo">
<ImageCompare beforeLabel="Grayscale" afterLabel="Color" ratio="3 / 4">
{#snippet before()}<img {src} alt="" style:filter="grayscale(1)" />{/snippet}
{#snippet after()}<img {src} alt="" />{/snippet}
</ImageCompare>
<p>A library in Basra, from al-Wasiti's Maqamat of al-Hariri, 1237.</p>
</div>
<style>
.demo {
inline-size: min(22rem, 100%);
}
p {
margin: 0.5rem 0 0;
color: var(--ui-muted);
font-size: 0.875rem;
}
</style>Props
| Prop | Type | Default |
|---|---|---|
before, after | Snippet (required) | |
beforeLabel, afterLabel | string | 'Before', 'After' |
value | number, 0–100 (bindable) | 50 |
ratio | string | '4 / 3' |
Keyboard
| Key | Does |
|---|---|
| ← → | Move the handle by 1% |
| Page Up Page Down | Move it by 10% |
| Home End | All before, all after |
Accessibility
- The handle is a slider named after both labels, announcing how much of "after" shows.
- Describe what the images show in text nearby, such as a caption.
- With reduced motion, the handle moves without gliding.