Before / After Slider

Two images, one draggable divider

Point it at two images (data-before/data-after) and you get a draggable comparison slider. Mouse and touch drag plus keyboard (←/→, Home/End) are supported, and you can customize corner labels (data-before-label/data-after-label), the initial position (data-start), and the divider color (data-accent). The single most effective way to show "what changed", photo edits, renovations, AI-generated results. Included in the Mr. Latte Membership (every widget on up to 2 sites). Unlimited comparisons while you are a member.

Demo

Preview

Before

After⇄

Drag the divider (or ←/→) to sweep between two images

Integration

The same loader (bootsignal.js) powers your other widgets too. An active subscription is required to run the widget.

Pricing

Pricing is a single Mr. Latte Membership. It unlocks every widget on up to 2 sites and the paid features of the other Mr. Latte services too. Writing comparisons needs the membership; there is no usage limit, and reading is always free for visitors. See the price, join and manage it at accounts.mrlatte.net. See full pricing →