Articles on: The Pro editor

Before/after slider

The before/after slider provides an interactive image comparison. Visitors can drag a slider to reveal two images making the difference between "before" and "after" states instantly clear.


Getting Started


Start by adding your two images. In the images tab, you'll find separate upload fields for each image. Upload your "before" image and optionally give them a meaningful title. These titles help visitors understand what is being compared, and they're important for accessibility.


For the best effect, use images with the same composition and framing. When the images align perfectly, the slider creates a seamless reveal that makes the transformation feel smoother.


Sliding orientation


The orientation determines how your slider moves.

  • Horizontal orientation creates a left-to-right reveal. It's intuitive and works well on all screen sizes.
  • Vertical orientation creates an up-and-down reveal and are most suitable the image is taller than it is wide.


Starting position


The start position controls what visitors see first when they land on your page. Starting at 0% shows the full "before" image. Choosing a starting point slightly past 0% sparks curiosity and may signal more clearly that the component can be interacted with.


Titles


Titles help visitors understand what they're comparing. You can position them in any corner of the slider. By default, the titles are hidden, but you can choose a position from the settings panel.


The slider automatically shows the relevant title based on which image is more visible. When visitors see more of the "before" image, they see the "Before" title. As they drag and reveal more "after", the title switches.


Drag handle


The drag handle is what visitors grab to move the slider. For its style, you can choose from various options that range from large and visible to more minimal options, or even no drag handle, to ensure a smooth transition. Larger handles are easier to grab (especially on smaller screens) and signal interactivity, while smaller handles are more subtle.


Controlling the experience


By default, visitors can drag the slider themselves. If you want to take control of the reveal on the page, you can turn off user interaction. This enables you to control the component with animations, for example the scrub on scroll effect.


When your slider is controlled by an animation, the duration and easing control how it feels. A shorter duration (300-500ms) feels snappy and responsive, while longer durations (1000-1500ms) create a more cinematic reveal. Easing determines the feel of the animation by tempo. Whereas linear the speed stays constant, any of the easing variants will slow or speed up throughout the animation for more natural movement.


Customizing the look


The style panel lets you customize the look and feel of the component. The line along with the handle that divides your images can altered to look more minimal or bold.


Titles can be styled to match your brand typography and colors. A dark background with white text creates good contrast and readability, but you can match your brand colors for a more integrated look.


Mobile experience


On mobile devices, the slider automatically adapts. The handle becomes slightly larger on touch devices to ensure it's easy to grab, making the experience smooth and intuitive across all devices. You can make changes to the slider without it altering the desktop version, for example, if you'd prefer a vertical slide on mobile because the screen is more narrow.


Best Practices


  • Use images with matching dimensions and composition for the most dramatic effect. The better your images align, the more powerful the comparison becomes.
  • Fill in meaningful titles as they help visitors understand what they're comparing and improve accessibility.
  • Match your styling to your brand. The slider should feel like it belongs in your design, not like a generic tool.



Updated on: 18/12/2025