PrimeBlocks: One-Time Purchase Replaces Subscription Model 🎉Learn More

ImageCompare

Compare two images side by side with a slider.

Import #


import ImageCompare from 'primevue/imagecompare';

Basic #

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


<ImageCompare class="shadow-lg rounded-2xl">
    <template #left>
        <img src="~/assets/images/island1.jpg" />
    </template>
    <template #right>
        <img src="~/assets/images/island2.jpg" />
    </template>
</ImageCompare>

Responsive #

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


<ImageCompare class="sm:!w-96 shadow-lg rounded-2xl">
    <template #left>
        <img src="~/assets/images/island1.jpg" />
    </template>
    <template #right>
        <img src="~/assets/images/island2.jpg" />
    </template>
</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>
<ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
    ...
</ImageCompare>

<ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
    ...
</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.

Build Faster Design Better

490+ ready to use UI blocks crafted with PrimeVue and Tailwind CSS.

Learn More

name	type	default	description
tabindex	number	0	Index of the element in tabbing order.
ariaLabel	string	null	Defines a string value that labels an interactive element.
ariaLabelledby	string	null	Identifier of the underlying input element.
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<ImageComparePassThroughOptions>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
left		VNode<RendererNode, RendererElement, Object>[]	Custom left template.
right		VNode<RendererNode, RendererElement, Object>[]	Custom right template.

name	type	default	description
instance	any	null	Defines instance.
props	ImageCompareProps	null	Defines valid properties.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	ImageComparePassThroughOptionType	null	Used to pass attributes to the root's DOM element.
slider	ImageComparePassThroughOptionType	null	Used to pass attributes to the slider's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

ImageCompare

Import #

Basic #

Responsive #

Accessibility #

Screen Reader

Keyboard Support

ImageCompare API

ImageCompare #

Props #

Slots #

Interfaces #

ImageComparePassThroughMethodOptions #

ImageComparePassThroughOptions #

ImageComparePassThroughAttributes #

Types #

ImageComparePassThroughOptionType #

ImageCompareEmits #