Comparer
<pc-comparer> Compare visual differences between similar content with a sliding panel.
For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the ← and → arrow keys.
Press Shift + ← or → arrow key to move the slider in intervals of 10, or Home + End to jump to the beginning or the end.
<pc-comparer>
<img
slot="before"
src="https://placer-toolkit.vercel.app/images/desert-at-daytime.webp"
alt="A desert at daytime"
/>
<img
slot="after"
src="https://placer-toolkit.vercel.app/images/desert-at-nighttime.webp"
alt="A desert at nighttime"
/>
</pc-comparer>
<p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">
<strong>
<a
href="https://unsplash.com/photos/sand-dune-zuueig1w8WI"
rel="noreferrer noopener"
target="_blank"
>
Sand dune</a>
</strong> and
<strong>
<a
href="https://unsplash.com/photos/desert-at-night-a2kD4b0KK4s"
rel="noreferrer noopener"
target="_blank"
>
Desert at night</a>
</strong> by
<a
href="https://unsplash.com/@yamaicle"
rel="noreferrer noopener"
target="_blank"
>
Mike Yukhtenko</a> are available on
<a href="https://unsplash.com">
Unsplash</a> under the
<a
href="https://unsplash.com/license"
rel="noreferrer noopener"
target="_blank"
>
Unsplash License</a>.
</p>Use the position attribute to set the initial position of the slider. This is a percentage from 0 to 100.
| Name | Description | Reflects | Default |
|---|---|---|---|
position | The position of the divider as a percentage. Type: number |
| 50 |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about customising animations.
| Name | Description |
|---|---|
before | The before content, often an <img> or <svg> element. |
after | The after content, often an <img> or <svg> element. |
handle | The icon used inside the handle. |
Learn more about using slots.
| Name | Description | Event detail |
|---|---|---|
pc-change | Emitted when the position of the handle changes. | ‐ |
Learn more about events.
| Name | Description | Default |
|---|---|---|
--divider-width | The width of the dividing line. | 0.125rem |
--handle-size | The size of the compare handle. | 2.5rem |
Learn more about customising custom properties.
| Name | Description |
|---|---|
base | The component’s base wrapper. |
before | The container that wraps the before content. |
after | The container that wraps the after content. |
divider | The divider that separates both sides. |
handle | The handle that the user drags to expose the after content. |
Learn more about customising CSS parts.
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/comparer/comparer.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/comparer/comparer.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/comparer/comparer.js";This component automatically imports these components: