Before and After Slider Widget
Put a renovation, a deep clean or a photo retouch side by side in one frame: visitors drag the divider, tap anywhere on the picture or use the arrow keys, and screen readers hear "45% Before, 55% After" as it moves.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/before-after-slider" title="Before and After Slider by A2Z Tools" width="100%" height="430" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="before-after-slider" data-height="430"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
You give two https image addresses, two labels and optional alt text. The after photo fills the frame; the before photo sits exactly on top and is trimmed with a CSS clip-path, so a value of 45 shows the left 45% as before and the right 55% as after (top and bottom when vertical). The control is a genuine range input from 0 to 100: arrow keys move one step, Page Up and Page Down ten, Home and End jump to the ends, and its aria-valuetext reads like "45% Before, 55% After" with your own labels. In vertical mode the input counts the divider's height from the bottom, so Up moves the line up exactly as the WAI-ARIA slider pattern expects. Mouse, pen and finger drags anywhere on the picture set the same value; a horizontal slider leaves vertical page scrolling to the browser. Both photos are cropped to one frame shape (3:2 by default), so shoot them from the same spot. If only one address is valid or either fails to load, the widget shows the two pictures side by side with their labels rather than a half-empty slider.
Method
- Before layer clip: horizontal inset(0 (100 - v)% 0 0); vertical inset(0 0 (100 - v)% 0), v = before percentage 0-100
- Pointer: v = (pointer - stage start) / stage size x 100, clamped to 0-100, rounded to 0.1
- Range input: value = v (horizontal) or 100 - v (vertical); aria-valuetext = round(v)% + before label + ", " + (100 - round(v))% + after label
- Keys: Right/Up +1 on the input, Left/Down -1, Page Up/Down +/-10, Home/End min/max
- Fallback: two https images required; otherwise or on a load error, side-by-side pictures with labels
- Options: v_orientation=horizontal|vertical, v_ratio=3x2|4x3|16x9|1x1|3x4, v_start=0-100 (default 50)
Worked examples
Keyboard to 45%
Inputs: Default start 50; press ArrowLeft five times
Result: Divider at 45%; before layer clip inset(0 55% 0 0); screen reader hears "45% Before, 55% After"
Each arrow press is one step of 1%; 45% of the width shows the before photo.
Pointer drag
Inputs: Stage 300 px wide starting at x = 100; finger lifted at x = 250
Result: Value 50, clip inset(0 50% 0 0)
(250 - 100) / 300 x 100 = 50%.
Vertical start at 30
Inputs: v_orientation=vertical, v_start=30
Result: Top 30% shows before; clip inset(0 0 70% 0); the range input holds 70
Vertical inputs count the divider height from the bottom, so 100 - 30 = 70.
Limitations
- Both photos are cropped to one frame shape; differently framed shots will not line up.
- Images must already be online at https addresses - nothing is uploaded or aligned for you.
- Dragging on a vertical slider does not scroll the page on touch screens.
- One comparison per widget; there is no carousel of several pairs.
Where publishers use it
- A kitchen fitter's project page comparing the 1990s units with the finished worktops
- A dental or cosmetic clinic showing whitening or aligner results with patient consent
- An end-of-tenancy or carpet cleaning company proving the difference on a real stain
- A photo restoration or retouching studio comparing a scanned print with the repaired file
- A landscaping firm's Wix gallery showing a garden before and after a season of work
Questions
How should I take the two photos so the comparison lines up?
Shoot both from the same position, height and zoom - a tripod spot marked with tape helps - and keep the same orientation. Export them at the same pixel size and aspect ratio, ideally 3:2 (for example 1500 x 1000). The widget crops both to the frame shape you choose, so photos with different shapes shift against each other and the comparison looks wrong.
Is it acceptable to edit the after photo?
Only honestly. Use your own photos of real work, keep lighting and white balance the same in both shots, and do not retouch the result beyond what a customer would actually see. Health and cosmetic advertisers should also follow their regulator's rules on before-and-after imagery and have written consent from anyone pictured. A2Z displays what you supply and does not check it.
How do keyboard and screen-reader users use the slider?
Tab focuses the slider; a ring appears around the round handle. Left and Right arrows move by 1%, Page Up and Page Down by 10%, Home and End to the ends. The slider announces your labels, e.g. "30% Kitchen before, 70% Kitchen after", and each photo keeps its own alt text, which you can set separately from the short label.
When should I use the vertical orientation?
When the change runs top to bottom - a facade being repainted from the roof down, a lawn treatment seen from above, or a tall portrait crop such as 3:4. On touch screens a vertical slider uses up-and-down drags on the picture itself, so the page does not scroll while a finger is on the photo; leave some page above and below it to scroll by.
What happens if one of my photos is missing or moved?
If an address is not https, is empty or the server returns an error, the widget stops being a slider and shows both pictures side by side with their labels, with an "Image unavailable" tile where the broken one was. Fix the address in the builder and the slider comes back - nothing half-works silently.
Sources
- Slider Pattern - W3C WAI-ARIA Authoring Practices Guide . Right/Up increase and Left/Down decrease by one step, Home/End go to the ends, optional Page Up/Down; aria-valuetext when the number alone is not meaningful. Checked 2026-10-01.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Before and After Slider https://a2z.tools/embed/before-after-slider
<a href="https://a2z.tools/embed/before-after-slider">A2Z Tools Before and After Slider</a>
[A2Z Tools Before and After Slider](https://a2z.tools/embed/before-after-slider)
Before and After Slider by A2Z Tools - https://a2z.tools/embed/before-after-slider
Related widgets
-
Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.
-
Customer quotes as cards, a featured quote, a list or a manual slider, with stars and initials avatars.
-
Feature-by-feature comparison of 2-6 products with ticks, crosses and words, a sticky first column and grouping.
-
Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.
-
A vertical or sideways-scrolling timeline of dated milestones, with an optional Now marker.
-
Numbered How-it-works steps with drawn icons, or an order tracker that highlights the current step.