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. 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"
      alt="Colour 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&sat=-100&bri=-5"
      alt="Greyscale version of a fantasy desert that’s all blue"
  />
</pc-comparer>

Code

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"
      alt="Colour 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&sat=-100&bri=-5"
      alt="Greyscale version of a fantasy desert that’s all blue"
  />
</pc-comparer>

Code

Properties

Name	Description	Reflects	Default
`position`	The position of the divider as a percentage. `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.	-
`--handle-size`	The size of the compare handle.	-

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 ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.

Script

Import

Bundler

To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/comparer/comparer.js"></script>

To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/comparer/comparer.js";

To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "placer-toolkit/dist/components/comparer/comparer.js";

Dependencies

This component automatically imports these components:

Icon