📄 primeng/imagecompare

File: imagecompare.md | Updated: 11/15/2025

Source: https://primeng.org/imagecompare

PassThrough Attributes just landed ✅Learn More

  • SearchK

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

ImageCompare

Compare two images side by side with a slider.

Import #

import { ImageCompareModule } from 'primeng/imagecompare';

Basic #

Images are defined using templating with left and right templates. Use the style or class properties to define the size of the container.

<p-imagecompare class="shadow-lg rounded-2xl"> <ng-template #left> <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" /> </ng-template> <ng-template #right> <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" /> </ng-template> </p-imagecompare>

Responsive #

Apply responsive styles to the container element to optimize display per screen size.

<p-imagecompare class="sm:!w-96 shadow-lg rounded-2xl"> <ng-template #left> <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" /> </ng-template> <ng-template #right> <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" /> </ng-template> </p-imagecompare>

Accessibility #

Screen Reader

ImageComponent component uses a native range slider internally. Value to describe the component can be defined using aria-labelledby and aria-label props.

<span id="image_label">Compare Images</span> <p-imagecompare class="shadow-lg rounded-2xl" aria-labelledby="image-label"> ... </p-imagecompare>

<p-imagecompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
    ...
</p-imagecompare>

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the component. | | left arrow__up arrow | Decrements the value. | | right arrow__down arrow | Increments the value. | | home | Set the minimum value. | | end | Set the maximum value. | | page up | Increments the value by 10 steps. | | page down | Decrements the value by 10 steps. |

  • Import

  • Basic

  • Responsive

  • Accessibility

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

Learn More

PrimeNG 20.3.0 by PrimeTek