Setup 

• Before image — the starting state.
• After image — the result. Should be the same crop and aspect ratio as the before.
• Heading + Caption above the slider.
• Before label + After label — corner tags shown on each side.
• Initial position — where the divider starts on page load, in % (0-100).

Interactions

• Drag the handle horizontally to reveal more / less of each image.
• On mobile, the handle responds to touch.
• Keyboard accessible: arrow left / right move the divider.

Image guidelines

• Both images must have the same dimensions and crop. Otherwise the divider creates a strange visual offset.
• 16:9 or 4:5 aspect ratios work best.
• Keep file size under 500KB per image.