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 arrowup arrow | Decrements the value. |
| right arrowdown 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. |