Content

Image compare

Two pictures on top of each other with a line you drag to compare them.

Before and after

HTML

<div class="pw-compare" data-pw-compare data-start="40" data-before="Before" data-after="After" style="max-width:560px">
  <img src="assets/img/before.svg" alt="The hills in grey">
  <img src="assets/img/after.svg" alt="The same hills in colour">
</div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-start`	`50`	Where the line starts, 0 to 100.
`data-before, data-after`		Small labels in the top corners.
`data-label`	`Move to compare the two images`	Name of the slider for screen readers.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:change`	With `value`, 0 to 100.

From your script

var c = Partwise.get(compareElement, 'compare');
c.value; c.value = 75;

Keyboard

Key	Action
`Left` `Right`	Move the line
`Home` `End`	All the way to one side

Good to know

Under the hood it is a normal range slider, so mouse, touch and keyboard all work.
Use two pictures of the same size. The first one sets the size of the box.
Both pictures need their own alt text.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/30-carousel.css, js/30-carousel.js.