Image Comparer
The Image Comparer element is used to compare two images. It displays the images on top of each other and allows you to reveal the bottom image using the built-in slider.
Basic Usage
When to use
Use wje-img-comparer to improve readability, scannability, and contextual understanding of content.
When not to use
Do not replace structured interactive data with media-only presentation when precision is needed.
Accessibility
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
Best Practices
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
divider | The divider part. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-img-compare-divider-area | The area of the divider. This is the size of the divider. Accepts any valid CSS size. |
--wje-img-compare-divider-background | Sets the background color of the divider in the image comparison component. Accepts any valid CSS color value (e.g., red, #ff0000, rgba(255, 255, 255, 0.5)). The default value is white, which ensures high contrast in most designs. |
--wje-img-compare-divider-size | The size of the divider. This is the thickness of the divider. Accepts any valid CSS size. |
--wje-img-compare-divider-left | The left position of the divider. This is the initial position of the divider. |
--wje-img-compare-position | The position of the divider. This is the position of the divider. |
--wje-img-compare-clip-path | The clip path of the divider. This is the clip path of the divider. |
Slots
| Name | Description |
|---|---|
before | The before image slot. |
after | The after image slot. |