ImageCompare

New

See the difference. Slide between two images to reveal edits, transformations and before-and-after details.

Before and afterResponsiveKeyboard accessible

Basic

Drag the divider or click anywhere on the image to move the comparison point.

Responsive

The comparison scales with its container. Both images keep the same size and alignment while the divider moves.

Controlled

Bind the revealed percentage, jump to a position or disable interaction.

Disabled

Original revealed: 50%

Usage and API

import { AvImageCompare } from 'avero-ui';

<av-image-compare [(value)]="position" ariaLabel="Compare island images">
  <ng-template #left>
    <img src="before.jpg" alt="Island before editing" />
  </ng-template>
  <ng-template #right>
    <img src="after.jpg" alt="Island after editing" />
  </ng-template>
</av-image-compare>

/* Apply the same dimensions to both images. */
img { width: 100%; height: 100%; object-fit: cover; }

Import AvImageCompare and provide #left and #right templates. Use images with matching dimensions and meaningful alternative text. The left image is clipped over the right image, preserving alignment.

[(value)] is the percentage of the left image revealed (0–100, default 50). Values are rounded and bounded; non-finite values display at 50%. aspectRatio defaults to 16 / 9. Style the host width to fit your layout.

Inputs include disabled, leftLabel, rightLabel, ariaLabel, ariaLabelledBy and ariaDescribedBy. Empty labels hide the badges. onChange emits { value, originalEvent } while moving; onSlideEnd emits when a pointer change is committed or a navigation key is pressed.

Tab focuses the native range control. Left / Up decrease the value, Right / Down increase it, Home / End select 0% / 100%, and Page Up / Page Down move by 10%. The accessible value describes the revealed proportions.

Customize --av-image-compare-radius, --av-image-compare-divider and --av-image-compare-handle. Reference: PrimeNG ImageCompare.