Build a before/after slider with HTML and CSS

By NOS Team · Updated Nov 8, 2026 · 7 min read

A before/after slider is two pictures occupying the same rectangle. The lower layer stays visible. The upper layer is clipped, and a divider marks the clip edge. Moving one value changes the clipped area and the divider together.

That definition from the original guide is still the useful starting point. The missing part was a complete page that could be opened, tested on a narrow screen, shared, and changed at the same address. We completed that full path with a fictional studio renovation.

What does a finished before and after image slider website need?

The comparison itself is only one part of the result. A useful page also needs clear Before and After labels, a visible divider, a control name for assistive technology, a short explanation of what changed, and a layout that fits a phone without sideways scrolling.

Our fictional page compares the same studio corner in both states. The window and desk stay aligned. The after side changes the wall, floor, lamp, and plant. Because both scenes share the same frame, the divider reveals a real visual difference instead of jumping between two viewpoints.

Download the complete fictional example

How do the two image layers stay together?

Give the comparison wrapper a fixed aspect ratio and make it the positioning reference. Put both picture layers at every edge of that wrapper. Then clip the upper layer from the right by the amount that is not currently revealed.

The divider reads the same percentage as the clip. At 30%, the divider sits 30% across the box and the upper layer occupies the left 30%. At 68%, it moves farther right and reveals more of the lower layer. Keeping one shared value prevents the line and the picture edge from drifting apart.

The example draws its fictional scene with HTML and CSS, so it has no external image files to lose. For photographs, place one image in each layer and give both the same width, height, and crop rule. Export both photographs at the same dimensions and shoot them from the same position. Keeping an image's aspect ratio explains the sizing side in more detail.

Why use a range input for the divider?

A range input already understands touch, mouse dragging, arrow keys, Home, and End. Stretch it over the comparison, give it a clear label, and use its value for the shared position. This is smaller and more dependable than inventing every drag and keyboard behavior separately.

The control in the example is named “Reveal after image.” Its current percentage is also exposed as readable text. A sighted reader gets the divider and the “68% after” readout; a keyboard or screen-reader user gets the named control and its current value.

Keep vertical page scrolling available on phones. A horizontal comparison should claim sideways movement, not every finger gesture that begins over the picture. The detailed control options are covered in Range slider in HTML.

How do you share the working comparison?

A screenshot freezes the divider. The recipient cannot reveal the hidden side or inspect the exact point where two details meet. We put the finished example in NOS, opened Share, and used the page's share address.

The address from the Share panel is the one to send. The editing address is for the author, and the preview inside the editor is not the recipient's page. Keeping those roles separate avoids sharing an address that asks the reader to sign in.

Can you update the page without sending a new link?

Yes, for this tested page. We kept the same NOS page and changed its HTML. The original shared address then showed the revised title and the new starting position.

The first attempt in Edit mode selected visible text but did not change the underlying page. That is an important failure path for a custom interactive layout: if direct text editing does not reach the part you need, stop repeating the same click. Open Code, replace the page content there, and check the preview before leaving.

We then reopened the exact share address used before the edit.

This is the practical reason to publish the comparison as a page. You can correct a label, replace the two pictures, or choose a better starting split without asking everyone to use a different address. Always reopen the shared page after an update; seeing the right preview in the editor is not proof that the reader's page changed.

What usually breaks a before/after slider?

• The scene jumps at the divider: the pictures use different framing. Match their dimensions and camera position before changing the slider.
• The layers appear one below the other: both layers must occupy the same positioned wrapper.
• The box collapses while images load: give the wrapper an aspect ratio or an explicit height.
• The line moves but the reveal does not: make the divider and the clipped layer read one shared position.
• The page will not scroll past the slider on a phone: preserve vertical touch movement for the page.
• Pictures disappear on the shared page: local file paths did not travel with the HTML. Embed the images or use image addresses the shared page can reach.

If the comparison belongs inside a set of project images rather than one focused page, HTML image gallery is the more useful next step.

When not to do this

Do not use a slider when the two images show different angles, crops, or moments that cannot be aligned. Put them side by side with captions instead. Side-by-side images are also better when readers need to see both states at once, print the comparison, or compare several details without dragging back and forth.

Where NOS fits

NOS turns the finished HTML page into a share link and keeps the editor and reader views separate. For this example, a reader could open the interactive comparison without signing in, while the author kept the editing controls. The current plan details are on the pricing page, and HTML to link covers the sharing step by itself.