Before After Slider Image Comparison Block

Before After Slider Image Comparison Block is a native WordPress block designed for visually comparing two images using an interactive slider. It enables users to display before-and-after image pairs within posts or pages, allowing site visitors to drag a handle to reveal the differences between the images. The block provides a live, draggable preview directly in the WordPress editor, with no need for shortcodes or a separate settings screen. Users can set up the slider by picking a before and an after image, with instant live preview as images are selected. The tool supports both single and multiple comparisons within the same block, and comparisons can be arranged side by side. Sliders can be oriented horizontally or vertically, allowing for left-to-right or top-to-bottom reveals, and the handle, labels, and keyboard controls adapt accordingly. Several design presets—Minimal, Classic, Bold, Soft, and Dark—are available, with further options to fine-tune appearance. For single comparisons, users can adjust width, alignment (left, centered, or right), and aspect ratio. Accessibility features include keyboard control, ARIA slider semantics, and focus states, making the slider usable with screen readers and arrow keys. The implementation is performance-focused, using vanilla JavaScript, lazy-loaded images, and zero external requests, ensuring that all assets are served from the user's site and that no tracking occurs. The slider can also be configured to move on hover, with touch devices retaining drag functionality. The block is compatible with both block and classic WordPress themes, and does not require a page builder. It is available for free, with no tracking and no external dependencies, and can be installed from the WordPress directory. This makes it suitable for users who want to showcase visual changes or transformations on their WordPress sites without relying on third-party services or complex setup.