Before and After Slider Generator
Generate a before and after comparison slider with a draggable divider, using only HTML and CSS with a range input, so it works without JavaScript and with a keyboard.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
A comparison slider is a range input in disguise
The usual implementation listens for mouse events on a container and moves a divider, which works with a mouse and fails with a keyboard, a screen reader and a touch device that scrolls instead. Building it on a range input instead gets all of that for nothing: arrow keys move the divider, the value is announced, touch works because the browser already handles it, and the whole thing degrades to a usable control if the styling fails to load.
The two images must be identical in size
The effect depends on the two images occupying exactly the same space, so the divider reveals corresponding parts of each. Images of different dimensions or aspect ratios produce a comparison where the two halves show different framings, which is misleading rather than merely untidy. Cropping both to the same frame before comparing is the only correct approach.
Label which side is which
A slider without labels leaves the reader guessing which image is the original, and the convention differs between fields: photography usually puts the edited version on the right, while restoration work often puts the original there. Persistent labels on both sides remove the ambiguity, and they matter more than they seem, because a comparison that is read backwards makes the opposite point to the one intended.
Related tools
- EXIF Viewer — Extract hidden EXIF data (Camera, GPS, Settings) from images.
- Favicon Generator — Generate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
- Placeholder Image Generator — Generate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.
- Image Resizer — Resize images in your browser with aspect ratio control and format conversion. Files are processed locally and never uploaded.
Frequently Asked Questions
Why build it on a range input?
Because arrow keys, screen reader announcement and touch handling all come for free, and the control still works if the styling fails. A container listening for mouse events has to reimplement each of those, and usually does not.
Do the images have to be the same size?
Yes. The effect depends on both occupying exactly the same space, so different dimensions produce a comparison where each half shows a different framing, which misleads rather than just looking untidy.
Does this need JavaScript?
No. The divider position comes from the range input value, which CSS reads through a custom property, so the whole thing is HTML and CSS. A small script is included only to keep the property in sync in older browsers.
How do I label the two sides?
With persistent labels on each side rather than a legend elsewhere. The convention differs by field, so a reader cannot infer which is which, and a comparison read backwards makes the opposite point to the one intended.
Is it accessible?
More so than the usual implementation. It is a labelled slider with a value, so a screen reader announces it and a keyboard operates it. The images still need alt text describing what each one shows.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Upload two images to generate a working before and after slider.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
EXIF Viewer
ImageExtract hidden EXIF data (Camera, GPS, Settings) from images.
Favicon Generator
ImageGenerate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
Placeholder Image Generator
ImageGenerate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.