Tired of frantically switching between tabs or awkwardly overlaying images just to spot the differences in your renders?
The Image Comparer Slider node delivers a smooth, interactive, and ultra-precise comparison slider directly inside your ComfyUI interface. Built for power users who demand absolute control, it lets you inspect upscale quality, evaluate different checkpoints, or scrutinize fine details without ever breaking your workflow.
🚀 Key Features
Real-Time Interactive Comparison: Smoothly slide the divider left and right for a seamless, transparent transition between both renders.
Synchronized Zoom & Pan (Absolute Pixel-Peeping): Scroll your mouse wheel to zoom and drag to pan. Both images remain perfectly locked and synchronized, allowing you to track minute variations in grain, sharpness, or artifacts at the exact same pixel coordinates.
Native & Fluid UI Integration: Powered by a dedicated front-end implementation (
image_comparer_slider.js), the canvas wrapper integrates flawlessly into the ComfyUI graph with zero latency.VRAM Lightweight: Engineered with clean backend logic (
image_comparer_slider.py) to ensure it leaves no performance footprint on your heavy generation pipelines.
📦 Note: This node is included as part of the ComfyUI-3R3BOS-Pack suite. Installing the pack gives you instant access to this comparison tool along with our other workflow optimization utilities.
🛠️ Installation
Method 1: Via ComfyUI Manager (Recommended)
Open the ComfyUI Manager.
Click on Custom Nodes Manager.
Search for
ComfyUI-3R3BOS-Pack.Click Install, then restart your ComfyUI instance.
Method 2: Manual Installation (Git)
Navigate to your custom_nodes directory and clone the repository:
Bash
cd ComfyUI/custom_nodes
git clone https://github.com/3R3BOS/ComfyUI-3R3BOS-Pack.git
Restart ComfyUI to let the interface register the custom scripts.
🔗 Useful Links & Resources
✨ Star the repository to stay updated with the latest features and optimizations!
💡 Quick Start Guide
Right-click on the workspace ->
Add Node->3R3BOS->Image Comparer Slider.Connect your baseline image to the
image_1input slot.Connect your modified/upscaled image to the
image_2input slot.Queue the prompt.
Inspect away: Use your mouse wheel to zoom, left-click and drag to move around, and drag the center bar to compare!