3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Image Comparer

<wa-image-comparer> Since 2.0 stable

Compare visual differences between similar photos with a sliding panel.

For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)

Grayscale version of kittens in a basket looking around. Color version of kittens in a basket looking around. 
<wa-image-comparer>
  <img
    slot="before"
    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
    alt="Grayscale version of kittens in a basket looking around."
  />
  <img
    slot="after"
    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
    alt="Color version of kittens in a basket looking around."
  />
</wa-image-comparer>

Examples

Initial Position

Use the position attribute to set the initial position of the slider. This is a percentage from 0 to 100.

A person sitting on bricks wearing untied boots. A person sitting on a yellow curb tying shoelaces on a boot. 
<wa-image-comparer position="25">
  <img
    slot="before"
    src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
    alt="A person sitting on bricks wearing untied boots."
  />
  <img
    slot="after"
    src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
    alt="A person sitting on a yellow curb tying shoelaces on a boot."
  />
</wa-image-comparer>

Slots

Name Description
before The before image, an <img> or <svg> element.
after The after image, an <img> or <svg> element.
handle The icon used inside the handle.

Properties

Name Description Reflects
position
position
The position of the divider as a percentage.
Type number
Default 50

Events

Name Description
wa-change Emitted when the position changes.

CSS custom properties

Name Description
--divider-color
The color of the divider.
--divider-width
The width of the dividing line.
--handle-color
The color of the icon used inside the handle.
--handle-size
The size of the compare handle.

CSS parts

Name Description
base The component's base wrapper.
before The container that wraps the before image.
after The container that wraps the after image.
divider The divider that separates the images.
handle The handle that the user drags to expose the after image.

Dependencies

This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/image-comparer/image-comparer.js';
 Coming soon! Coming soon!
    No results