The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

Comparer

<pc-comparer>

0.5.1

experimental

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. Tip: Press Shift + Arrow keys 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://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
        alt="Greyscale version of a fantasy desert that’s all blue"
    />
    <img
        slot="after"
        src="https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
        alt="Colour version of a fantasy desert that’s all blue"
    />
</pc-comparer>

Code

Edit

Demos#

Initial position#

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

<pc-comparer position="25">
    <img
        slot="before"
        src="https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
        alt="Greyscale version of a fantasy desert that’s all blue"
    />
    <img
        slot="after"
        src="https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
        alt="Colour version of a fantasy desert that’s all blue"
    />
</pc-comparer>

Code

Edit

Properties#

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 attributes and properties.

Slots#

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.

Events#

Name	Description	Event detail
`pc-change`	Emitted when the position of the handle changes.	‐

Learn more about events.

Custom properties#

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.

Parts#

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.

Importing#

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.

CDN (script tag)

CDN (import)

npm (import)

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.1/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.1/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";

Dependencies#

This component automatically imports these components:

Icon