TLDR: A before-and-after slider is two images stacked on top of each other with a draggable handle that wipes between them. It is the one component a screenshot cannot capture, because the value lives entirely in the drag. AI builds a working one as a single self-contained HTML file in one prompt. Match your image pair (same crop, same size), ask for mouse, touch, and keyboard control plus before and after labels, and insist it scales on a phone without overflowing. Then publish the real HTML as a live link, so the handle still drags for everyone who opens it.
A before-and-after slider is the most satisfying little component on the web, and it is also the one that dies the moment you flatten it. You grab the handle in the middle, drag it across, and the retouched photo, the finished renovation, or the redesigned page appears under your thumb while the old version slides away. That reveal is the whole point. A screenshot of it is just a split picture, and a plain side-by-side would have shown that better.
So it is a strange thing to build: genuinely delightful when it is live, completely worthless as an image. The good news is that you can build a before-and-after slider with AI in a single conversation, with your own two images, and get one that actually drags on a mouse, a finger, and a keyboard. This guide covers what makes a good one, the prompt that produces a working slider instead of a janky one, how to keep it alive on a phone, and how to get it in front of people with the drag intact.
What is a before-and-after slider, and when should you use one?
A before-and-after slider (also called an image comparison slider) is two images occupying the same box, one on top of the other, with a vertical handle you drag left and right. Everything to one side of the handle shows the “after,” everything to the other side shows the “before.” Drag the handle and you wipe between them.
It earns its place whenever the story is a transformation of the same thing, from the same angle. If the before and after are different subjects, a gallery is better. If they are the same subject changing, the slider is the format that makes the change feel real.
| Use it for | Before | After |
|---|---|---|
| Photo retouching | The raw shot | The edited, color-graded version |
| Home renovation | The empty or dated room | The finished space |
| Web or brand redesign | The old site screenshot | The new one |
| Product and skincare | Day one | Week twelve |
| Maps and satellite | Last year | This year |
| Design mockups | The client’s current page | Your proposed version |
Photographers, interior designers, agencies pitching a redesign, and anyone showing a “we fixed this” story all reach for the same component. If your two pictures are different things rather than two states of one thing, build a photo gallery instead.
What makes a good before-and-after slider?
The pattern is simple, but the difference between one that feels premium and one that feels broken is a short list of details. Ask for these by name:
- A matched image pair. Same subject, same crop, same angle, same dimensions. The slider only reads as a transformation when the single thing that changes under the handle is the edit itself. Mismatched sizes make the handle reveal a jarring jump.
- Three ways to move the handle. Pointer drag, touch drag, and left and right arrow keys when the handle is focused. A mouse-only slider is dead on a phone, which is where most people will open it.
- A handle you can actually grab. A clear divider line, a round grip in the center with little left and right arrows, and enough size that a thumb hits it without pixel-hunting.
- Before and after labels. Small badges in the two corners so there is never any doubt which side is which, ideally fading out as the handle passes over them.
- Click or tap to jump. Clicking anywhere on the image snaps the handle there, so people are not forced to drag from the exact center.
- Responsive images. The whole thing scales to its container and never overflows the screen, and the images keep their aspect ratio instead of squishing.
Here is the anatomy, so you know what you are asking the model to produce:
How do you prompt AI for a before-and-after slider?
Write the prompt like a short spec: the structure, the three input methods, the labels, the responsiveness, and the output format. The thing most people forget is that the interaction has to be requested explicitly, because “a before and after of my two photos” can be satisfied by a dead side-by-side.
Here is a full prompt you can copy, drop your own image URLs into, and run in Claude, ChatGPT, or any capable model:
Build me a before-and-after image comparison slider as ONE
self-contained HTML file.
Structure: two images of the same size stacked in one box. The "after"
image sits on top and is clipped by a vertical handle. Dragging the
handle left and right reveals more or less of the "before" image
underneath.
Controls:
- Drag the handle with a mouse or a finger (pointer and touch events).
- The handle is focusable and moves with the left and right arrow keys,
with a visible focus outline.
- Clicking or tapping anywhere on the image snaps the handle to that
spot.
Details: a thin white divider line, a round grip in the center with
small left and right arrows, a "BEFORE" badge in one top corner and an
"AFTER" badge in the other, and the badges fade as the handle passes
over them. Start the handle at 50%.
Responsive: the slider scales to fit any screen width, the images keep
their aspect ratio and never overflow, and the grip stays large enough
to tap on a phone.
Use these two images (same dimensions):
BEFORE: https://your-image-host/before.jpg
AFTER: https://your-image-host/after.jpg
Deliver ONE complete HTML file with all CSS and JavaScript inlined, no
libraries, no external requests beyond the two image URLs.Every line is doing a job. The clipped “after” layer is the actual mechanism, and naming it stops the model from faking the effect with opacity. The three control methods make it work for a mouse, a thumb, and a keyboard instead of just one. The “never overflow” line fixes the single most common way these break, which is an image that blows past the edge of a phone. And one self-contained file is what makes the result portable: publishable anywhere, openable everywhere, nothing to wire up. If the model keeps reaching for a slider library you did not ask for, there is a whole guide to getting self-contained HTML out of AI.
Want several reveals on one page, for a portfolio of redesigns or a room-by-room renovation? Add this:
Now turn this into a responsive grid of three sliders, each with its own
before/after pair and a short caption underneath. They should each work
independently, and the grid should stack to one column on phones.Handing the model real image URLs beats describing the pictures every time, the same way you attach your content directly rather than making it invent a placeholder. If your images are files rather than hosted URLs, keep them as a small set of files and publish the whole thing as a project instead of a single page.
How is this different from just posting two pictures?
It helps to be honest about the alternatives, because sometimes a slider is overkill and sometimes it is the only thing that works. Here is the real comparison.
| Format | Shows the change | Interactive | Works in an email or deck | Best for |
|---|---|---|---|---|
| Two pictures side by side | Both at once, smaller | No | Yes | A quick, low-effort comparison |
| A screenshot of a slider | One frozen position | No | Yes | Nothing, really. It loses the point |
| A GIF or video wipe | A fixed, auto-playing sweep | No, you cannot control it | Sometimes | Social posts where you cannot host a page |
| A live drag-to-reveal slider | The viewer controls the reveal | Yes, full control | Only as a link | A reveal people explore themselves |
The slider wins when you want the viewer to feel the change by doing it, lingering on the exact spot that matters to them. It is also the one row in that table that a static image cannot stand in for, which is the whole reason it has to be shared live.
Make it feel intentional, not janky
A first build will usually drag. Making it feel good is a few rounds of specific notes, the same incremental rhythm you would use to iterate on any AI page:
- “Ease the handle slightly when I release it so it does not stop dead.”
- “Fade the before and after badges to zero as the handle gets within 60 pixels of them.”
- “Prevent the page from scrolling while I am dragging on touch.”
- “Add a subtle shadow on the divider line so it reads as a cut, not a drawn line.”
- “On first load, animate the handle from the edge to the center once so people know it moves.”
Keep each round short, test, repeat. That one-note-at-a-time loop is the heart of making an AI page genuinely interactive rather than just colorful.
Give the AI good visual direction
The structure is the easy part. The difference between a slider that looks like a developer demo and one that looks like a product is the direction you give. A few things to ask for by name, using the kind of feel words that art-direct AI output:
- A calm frame. Rounded corners, a soft border or shadow, and real breathing room around the slider so the image is the hero.
- A quiet handle. A thin white or glassy divider and a small circular grip. Let the images carry the drama, not the chrome.
- Type that matches your brand. Hand the model your fonts and colors for the labels and caption so it does not default to generic. The same move keeps any page from looking generic.
- One mobile pass. Ask it specifically to test at 375 pixels wide and fix anything that overflows, because mobile is where these break.
Your slider is done. Now keep it draggable
Here is where this component dies more often than any other. Someone builds a sharp before-and-after reveal, then pastes a screenshot of it into a deck, a doc, or an email. Every bit of the value evaporates in that instant. The handle is frozen, the drag is gone, and a plain side-by-side would honestly have been clearer. A picture of a slider is the one thing a slider should never become.
To stay useful, it has to be shared as a running page, not an image. That means publishing the actual HTML somewhere and sending the link, so whoever opens it gets the real thing: a handle they grab and drag, on their mouse, their thumb, or their arrow keys.
This is exactly what VisiblePage is for. You paste the HTML your AI produced, or drop a ZIP if your before and after are separate image files, and you get a live URL in seconds, with no build step, no server, and no hosting account to set up. The page runs for real, so the drag keeps working, and it loads fast from the edge for whoever opens it. While the reveal is still a draft you can keep it private or password-protected and share it with just the client, then flip it public once they sign off. Because it is one canonical link, swapping the after image updates the page for everyone without sending a new file, and you can point a custom domain like reveal.yourstudio.com at it so it reads as part of your brand.
Try it now: Publish your AI-built before-and-after slider with VisiblePage and get a live, draggable link in seconds.
The whole path, in one table
| Stage | What you do | What you end up with |
|---|---|---|
| Match | Pick a before and after with the same crop and size | A pair that reveals a change, not a jump |
| Prompt | Spec the clipped layer, three controls, and labels | A working draggable slider in one file |
| Polish | Send short notes: easing, badge fade, touch scroll | A reveal that feels intentional |
| Mobile | Test at phone width and fix any overflow | A slider that drags under a thumb |
| Publish | Paste the HTML into VisiblePage | A live link where the handle still drags |
Frequently asked questions
Can AI really build a before-and-after slider?
Yes. A drag-to-reveal before-and-after slider is a small, well-understood pattern: two images stacked on top of each other, a clip that follows a draggable handle, and a few lines of JavaScript for mouse, touch, and keyboard. Modern AI models write the whole thing as one self-contained HTML file in a single prompt, and it works on any device with no library.
What images work best in a before-and-after slider?
A matched pair: the same subject, same crop, same angle, same dimensions, shot or exported at the same size. The slider only looks right when the only thing that changes as you drag is the edit, the renovation, or the retouch. Mismatched sizes make the handle reveal a jump instead of a transformation, so line them up before you build.
Why does a screenshot of a before-and-after slider not work?
The entire value of the component is the dragging. A screenshot freezes the handle in one spot and kills the reveal, so you are left with a split image that a plain side-by-side would have shown better. To keep the slide, you have to share the running page, not a picture of it. Publish the HTML as a link and the handle keeps dragging for everyone who opens it.
How do I share a before-and-after slider so it still drags?
Publish the finished HTML as a live page and send the link. On VisiblePage you paste the HTML (or drop a ZIP if your images are separate files) and get a URL that runs the real page, so the handle drags on mouse, touch, and keyboard for anyone who opens it. You can keep it private while it is a draft, then flip it public, and updating the images keeps the same link.
The short version
A before-and-after slider is two matched images and a handle that wipes between them, and it is the one component a screenshot has no right to replace. Match your pair for crop and size, prompt for the clipped layer plus mouse, touch, and keyboard control plus before and after labels, and insist it scales on a phone without overflowing. Polish it with a few short notes, then publish the real HTML as a live link so the handle still drags for everyone who opens it. An idea and two photos going in, a draggable reveal at its own address coming out, and not one line of code written by hand.