Image Comparator

A lightweight, zero-dependency native image comparison slider component.

Most similar components only support sliding crop, but for detailed image comparison (design mockups, photo retouching before/after, medical imaging analysis), zoom and pan are equally essential. No existing component fit the bill, hence this small custom wheel.

Features

• Slide crop — drag the middle handle to compare left and right images
• Scroll zoom — zoom in to inspect every detail
• Drag to pan — freely move the image when zoomed in, with boundary clamping
• Fullscreen maximize — one-click immersive comparison, press Escape to exit
• Self-contained — CSS is inlined in JS, just include one file
• Native — zero dependencies, uses Pointer Events (mouse + touch)

Demo

https://metadream.github.io/image-comparator

Quick Start

<script src="https://unpkg.com/@metadream/image-comparator"></script>

<div class="image-comparator">
  <img class="left-image" src="before.jpg">
  <img class="right-image" src="after.png">
</div>

<script>
new ImageComparator('.image-comparator');
</script>

The container aspect ratio is determined by the loaded left-image natural dimensions. You can also set a fixed width / padding-bottom on .image-comparator to override.

Options

new ImageComparator('.image-comparator', {
  showMaximizeIcon: false,
  sliderPosition: 50,
  maxScale: 20,
  scaleStep: 0.2,
});

Option	Type	Default	Description
showMaximizeIcon	boolean	false	Show the maximize button in the top-right corner
sliderPosition	number	50	Initial slider position (percentage, 0–100)
maxScale	number	20	Maximum zoom level
scaleStep	number	0.2	Zoom step per scroll event

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge). Uses Pointer Events under the hood, works on mobile touch screens.