Data Display & Media
Image Comparer
Compares two images (or any content) with a draggable slider, or a crossfade.
Preview
Section titled “Preview”Provide two layers via the before and after slots — any content works
(images, or plain markup as shown here). Drag the divider to compare.
Before
After
<nana-image-comparer style="width: 100%; max-width: 26rem">
<div
slot="before"
style="
aspect-ratio: 3/2;
display: grid;
place-items: center start;
padding-inline: 1.5rem;
background: #1f6feb;
color: #fff;
font-weight: 600;
font-size: 1.25rem;
"
>
Before
</div>
<div
slot="after"
style="
aspect-ratio: 3/2;
display: grid;
place-items: center end;
padding-inline: 1.5rem;
background: #f59e0b;
color: #111;
font-weight: 600;
font-size: 1.25rem;
"
>
After
</div>
</nana-image-comparer>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/image-comparer";Basic usage
Section titled “Basic usage”<nana-image-comparer> <img slot="before" src="/compare-before.svg" alt="Before" /> <img slot="after" src="/compare-after.svg" alt="After" /></nana-image-comparer>Fade variant
Section titled “Fade variant”Set variant="fade" to crossfade between the two layers as you drag, instead
of the default clip slider.
Before
After
<nana-image-comparer variant="fade" style="width: 100%; max-width: 26rem">
<div
slot="before"
style="
aspect-ratio: 3/2;
display: grid;
place-items: center start;
padding-inline: 1.5rem;
background: #1f6feb;
color: #fff;
font-weight: 600;
font-size: 1.25rem;
"
>
Before
</div>
<div
slot="after"
style="
aspect-ratio: 3/2;
display: grid;
place-items: center end;
padding-inline: 1.5rem;
background: #f59e0b;
color: #111;
font-weight: 600;
font-size: 1.25rem;
"
>
After
</div>
</nana-image-comparer>Limits
Section titled “Limits”min and max are percentages the divider must stay between, so neither image
can be hidden entirely. They hold against dragging, the arrow keys, and Home
and End alike.
<nana-image-comparer
position="50"
min="20"
max="80"
style="width: 100%; max-width: 26rem"
>
<img
slot="before"
src="/compare-before.svg"
alt="Before"
style="display: block; width: 100%"
/>
<img
slot="after"
src="/compare-after.svg"
alt="After"
style="display: block; width: 100%"
/>
</nana-image-comparer>With neither set the divider runs the whole frame, which is how it has always behaved.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
max | max | number | 100 | Most of the first image the divider may leave showing, 0–100. |
min | min | number | 0 | Least of the first image the divider may leave showing, 0–100. |
position | position | number | 50 | Divider position, 0–100 |
variant | variant | ImageComparerVariant | 'slider' | Slider (clip) or fade (crossfade) |
Events
| Event | Description |
|---|---|
nana-change | Fired when the position changes (detail.position) |
Slots
| Slot | Description |
|---|---|
before | The "before" layer (overlaid / clipped) |
after | The "after" layer (base, sets the size) |
CSS parts
| Part | Description |
|---|---|
::part(base) | The container |
::part(handle) | The drag handle |
CSS custom properties
| Property | Description |
|---|---|
--nana-image-comparer-divider | Handle / divider colour |
--nana-image-comparer-radius | Corner radius of the framed images |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-change | CustomEvent | Fired when the position changes (detail.position) |
| Slot | Description |
|---|---|
before | The “before” layer (overlaid / clipped) |
after | The “after” layer (base, sets the size) |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-image-comparer-divider | Handle / divider colour |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
base | The container |
handle | The drag handle |
Accessibility
Section titled “Accessibility”- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Image Comparer interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook