Image Comparer

Compares two images (or any content) with a draggable slider, or a crossfade.

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

Show code Copy

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/image-comparer";

Basic usage

<nana-image-comparer>
  <img slot="before" src="/before.jpg" alt="Before" />
  <img slot="after" src="/after.jpg" alt="After" />
</nana-image-comparer>

Fade variant

Set variant="fade" to crossfade between the two layers as you drag, instead of the default clip slider.

Before

After

Show code Copy

API

Properties

Property	Attribute	Type	Default	Description
position	—	number	50	Divider position, 0–100
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

Events

Event	Type	Description
nana-change	CustomEvent	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 Variables

Variable	Default	Description
--nana-image-comparer-divider	—	Handle / divider colour

CSS Parts

Part	Description
base	The container
handle	The drag handle

Accessibility

• Keyboard accessible
• Screen-reader labels
• Focus-visible states
• ARIA roles and states
• WCAG 2.2 AA contrast

Related components

• Table
• Carousel
• Carousel Item
• QR Code
• Icon

Storybook

Explore Image Comparer interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook