Before-and-after sliders are one of the most effective ways to showcase transformations. Whether you are a photographer, interior designer, dentist, contractor, or fitness coach, a visual comparison tells a story that words alone cannot. Squarespace does not offer this as a native block, but you can add one with clean, lightweight code.
This tutorial covers how to build a before-and-after slider from scratch, and how to use our Before and After Slider Generator to skip the coding.
How Before-After Sliders Work
The technique is straightforward. Two images are stacked on top of each other. The after image sits on top. A clip-path or overflow-hidden technique reveals only a portion of the top image, and a draggable handle lets the user control how much of each image is visible.
The key technical decisions are the clipping method (CSS clip-path versus container overflow), the drag implementation (mouse events, touch events, or the HTML input range element), and the visual style of the divider handle.
Step 1: Prepare Your Images
Both images must have identical dimensions. If your before photo is 1200 by 800 pixels, your after photo must also be 1200 by 800. Any mismatch in aspect ratio will cause misalignment. Crop and resize both images to the same exact dimensions before uploading.
For file size, compress both images to under 300KB each. The slider loads both images at full resolution, so unoptimized images will double your typical image load time for that section.
Step 2: The HTML Structure
Add a Code Block to your Squarespace page and switch to HTML mode. The structure consists of a container div, the before image, an overlay div containing the after image, and a draggable handle element.
Use proper alt text on both images. The before image should describe the original state, and the after image should describe the result. This is important for accessibility and SEO.
Step 3: The CSS
The container needs position: relative and overflow: hidden. The before image fills the container. The overlay div is positioned absolutely on top, with a width controlled by CSS custom property or JavaScript. The handle is a thin vertical line with a circular grip in the center.
Add a hover cursor style to indicate the handle is draggable. Use cursor: col-resize for the standard resize indicator. Make the container responsive by setting width to 100% and using the aspect-ratio property to maintain proportions on all screen sizes.
Step 4: The JavaScript
The JavaScript handles three event types: mouse events for desktop, touch events for mobile, and optionally pointer events for a unified approach. When the user drags the handle, the script calculates the horizontal position relative to the container and updates the clip width of the overlay.
Key implementation details include preventing default browser drag behavior on images, handling the case where the user starts dragging on the handle and moves outside the container, and ensuring the slider responds smoothly without layout jank.
Step 5: Accessibility
A slider that only works with mouse drag is not accessible. Add keyboard support so users can adjust the position with arrow keys. Give the handle element appropriate ARIA attributes including role, tabindex, and value indicators.
Handle the keydown event on the slider element. Left arrow should decrease the position by a fixed step (like 5%), and right arrow should increase it. This makes the slider fully usable with keyboard navigation.
Using Our Generator Instead
If you prefer not to write the code yourself, our Before and After Slider Generator handles all of this. Upload your two images, choose a handle style, set the starting position, and copy the generated code. The generator outputs production-ready code with all the accessibility attributes, touch support, keyboard navigation, and responsive behavior already built in.
Best Practices for Before-After Content
Shoot from the same angle. The comparison only works if both photos have the same perspective, lighting angle, and framing. Use a tripod or mark your camera position.
Match the lighting. Different lighting conditions between the before and after shots will make the comparison feel unfair. Try to photograph at the same time of day or in the same lighting setup.
Do not over-edit the after image. If your after photo looks too perfect or heavily filtered, visitors will question the authenticity. Real results build more trust than polished perfection.
Label clearly. Add Before and After labels to the slider. Even though the interaction is intuitive, explicit labels remove any ambiguity and improve the experience for first-time users.
Explore our complete tools collection for more ways to enhance your Squarespace site.