Image Comparison Element - Sample Pages

Welcome to the Image Comparison Element sample gallery. This page provides links to all available versions and demonstrations of the tool.

Source code (GitHub)

Main Application

Web Component Demonstrations

Dual Image Comparison
Two independent image comparison tools running side by side, demonstrating how multiple components can coexist on the same page.
  • Two comparison tools side by side
  • High vs Low quality comparison
  • High vs Medium quality comparison
  • Independent controls for each element
View Demo
Multiple Settings Showcase
A grid layout showing the same image pair with different display modes and wipe settings, perfect for comparing different visualization options.
  • Under mode with simple wipe
  • OnionSkin mode with full wipe
  • Diff mode with simple wipe
  • InvDiff mode with full wipe
View Demo
Dynamic Image Switching
Interactive demonstration of dynamic image switching using JavaScript to change component attributes in real-time.
  • Button-controlled image switching
  • Real-time attribute updates
  • Quality comparison (99% vs 10%/50%/85%)
  • Dynamic UI updates
View Demo
Full Component Test
Comprehensive testing interface with all features and controls exposed, including detailed documentation and interactive controls.
  • All keyboard shortcuts documented
  • Interactive control buttons
  • Feature testing interface
  • Complete functionality overview
View Demo
Basic Component Test
Simple, minimal test page showing the basic component setup and usage without additional controls or documentation.
  • Minimal setup example
  • Basic component usage
  • Clean, simple interface
  • Perfect for quick testing
View Demo