DualViewCompare
Compare two images with a draggable divider. Supports horizontal/vertical orientation, custom handles and labels, touch/keyboard controls, and responsive scaling for mobile.
About this Component
“DualViewCompare is an interactive image comparison component that lets users explore before/after transformations by dragging a divider between two images. It supports both horizontal and vertical orientations, making it ideal for showcasing photo edits, design iterations, product changes, or any visual comparison. The component features a customizable divider with an optional draggable handle that can display default arrows or accept custom components. Built-in or custom labels automatically fade based on divider position to maintain visibility. Full keyboard navigation (arrow keys) and touch support ensure accessibility across all devices. Responsive scaling automatically adjusts handle and label sizes on smaller screens, with configurable breakpoints and scale factors. The component maintains image aspect ratios and supports custom border radius for seamless integration into any design system.”
