<wa-image-comparer>
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.)
<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>
Use the position
attribute to set the initial position of the slider. This is a percentage from 0
to 100
.
<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>
Learn more about using 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. |
Learn more about attributes and properties.
Name | Description | Reflects | |
---|---|---|---|
position position |
The position of the divider as a percentage.
Type
number Default
50 |
|
Learn more about events.
Name | Description |
---|---|
wa-change |
Emitted when the position changes. |
Learn more about 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.
|
Learn more about 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. |
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/image-comparer/image-comparer.js';