Articles on: The editor

Before/after slider

The before/after slider is an interactive image comparison component in the editor. Visitors drag a handle across two stacked images to compare a "before" and an "after" state.



The product update New components: Diagram & before/after slider shows the before/after slider alongside the diagram component.


Adding the slider and its images


To add a before/after slider and its two images:


  1. Open the Element library and drag Before/after slider from Components onto the canvas.
  2. With the slider selected, click Settings in the right panel.
  3. In the images tab, under Before, replace the default text "Before title" in Title with a title for the before image.
  4. Click the Image field and select your before image.
  5. Under After, replace the default text "After title" in Title with a title for the after image.
  6. Click the Image field and select your after image.


A new slider fills the Title fields with "Before title" and "After title", and this text shows on the slider until you replace it. Each Title is also used as that image's alt text for screen readers, so keep a meaningful title for both images, even if you hide the titles from view.


Both images are cropped to fill the slider frame. If an image's proportions differ from the frame, part of it is cut off, and two images with different proportions are cropped differently, so they no longer line up.


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.


Previewing the before and after states


To check both states of a before/after slider in the editor, select the slider and click the Before or After button in the right panel, below the Settings button. The slider on the canvas moves to that state.


Sliding orientation


The Orientation setting of the before/after slider sets the direction of the reveal. It is in the settings tab under Slider, and the default is Horizontal.


  • Horizontal creates a left-to-right reveal and works well on all screen sizes.
  • Vertical creates a top-to-bottom reveal and suits images that are taller than they are wide.


Transition effects


The Transition setting of the before/after slider sets how the after image is revealed. It is in the settings tab under Slider. The options are:


  • Linear (default): a straight reveal along the line.
  • Circle wipe: the after image is revealed from the center.
  • Gradient fade: a soft-edged reveal.
  • Diagonal wipe: the after image is revealed from the top-left corner.


Starting position


The Start pos. setting of the before/after slider sets how much of the after image is revealed when the slider settles, from 0% (the full before image) to 100% (the full after image). It is in the settings tab under Slider, and a new slider starts at 35%.


When the slider scrolls into view on the published page, it animates to the start position. It moves from 0% when the start position is below 50%, and from 100% when the start position is 50% or more. This animation uses the Duration and Easing settings.


A start position slightly above 0% shows part of both images, which signals to visitors that the slider can be dragged.


Titles


The titles of a before/after slider are text labels that tell visitors which image they are looking at. The text comes from the Title fields in the images tab.


To set where the titles appear, choose an option in the Titles setting in the settings tab under Slider:


  • No title
  • Left bottom (default)
  • Left top
  • Right top
  • Right bottom


The slider shows one title at a time. While less than 50% of the after image is revealed, it shows the before image's Title. From 50% on, it shows the after image's Title. If a Title field is empty, no title appears for that image.


Choosing No title hides the titles from view, but the Title text is still used as the images' alt text.


Drag handle


The drag handle of a before/after slider is the control visitors grab to move the slider. It is set in the settings tab under Drag handle:


  • Type sets the handle style: No drag handle, Circle with triangles (default), Triangles next to line or Small dot.
  • Size scales the whole handle, from 10 to 50 px (default 20 px).


Larger handles are easier to grab, especially on small screens, and make it clearer that the slider can be moved. With No drag handle, the dividing line still shows, and visitors can still drag the slider or click anywhere on it.


The rounding of the handle is set separately, in the Styling block under Handle.



Custom cursor


The Cursor setting of the before/after slider replaces the mouse cursor with your own image while visitors hover over the slider. It is in the settings tab under Slider. Use a PNG or SVG file; the recommended size is 32×32 px and the maximum is 128×128 px.


Turning off visitor interaction


To stop visitors from moving a before/after slider themselves, clear the Allow User Interaction checkbox in the settings tab under Drag handle. It is on by default.


With Allow User Interaction off, visitors can't drag the slider, click or tap to a position, or move it with the keyboard. The slider can still be moved by scrub on scroll or by a Control element link action.


Controlling the slider with scroll


To tie the position of a before/after slider to scrolling, apply the scrub on scroll effect to it. The slider then follows the visitor's scroll progress through the page.


When scrub on scroll is enabled on the slider, the Allow User Interaction checkbox in the settings tab is shown as off and greyed out, because scrub on scroll controls the slider's position.


Controlling the slider with a button


Any element, such as a button, can move a before/after slider through the Control element link action. This works whether or not Allow User Interaction is on.


To let an element move the slider:


  1. Select the element that should control the slider, such as a button.
  2. In the element's link settings, choose the Control element action.
  3. In Element, choose the before/after slider.
  4. In Action, choose what the element does:
    • Before shows the full before image.
    • After shows the full after image.
    • Next and Previous step between the two states.
    • (Re)Start returns the slider to its start position.


The Before, After, Next and Previous moves animate using the slider's Duration and Easing settings.


Animation duration and easing


The Duration and Easing settings of a before/after slider control how the slider animates when it moves to a position automatically: the animation to the start position when the slider scrolls into view, and the Before, After, Next and Previous moves triggered by a Control element link action. They do not affect dragging or scrub on scroll. Both settings are in the animation tab.


  • Duration sets the length of the move, from 0 to 3000 ms in steps of 100 ms. The default is 500 ms. A short duration (300–500 ms) feels quick, while a long duration (1000–1500 ms) gives a slower reveal.
  • Easing sets how the speed changes during the move. The options are Ease, Ease In, Ease Out, Ease In Out (default) and Linear. With Linear, the speed stays constant; the other options speed up or slow down during the move.


Visitors who have turned on reduced motion in their system settings see these moves instantly, without animation.


Styling the slider


The look of a before/after slider is set in the Styling block in the right panel, which has four selectors:


  • Slider: background, border and radius of the slider frame.
  • Line: the border of the line that divides the two images.
  • Handle: background, border and radius of the drag handle.
  • Titles: background, padding, radius and typography of the title boxes.


By default, titles have a dark, semi-transparent background with white text, which stays readable on most images.


Mobile behavior


On touch devices, the before/after slider adapts in two ways:


  • The drag handle is 20% larger, so it is easier to grab.
  • On a horizontal slider, a mostly vertical swipe scrolls the page instead of moving the slider. On a vertical slider, a mostly horizontal swipe does the same. This keeps the slider from blocking page scrolling.


Settings you change while editing the mobile layout apply to mobile only. For example, you can use Vertical orientation on mobile, where the screen is narrower, and keep Horizontal on desktop.


Frequently asked questions


Why can't visitors drag my before/after slider?


Visitors can't drag a before/after slider when its Allow User Interaction checkbox is off. Check the settings tab under Drag handle.


Why are my images cropped in the before/after slider?


The before/after slider crops both images to fill its frame. If an image's proportions differ from the frame, part of it is cut off. Use two images with the same proportions as the slider frame, and with the same composition, so they line up.


Can a button switch the before/after slider to the after image?


Yes. Give the button a Control element link action, choose the slider in Element, and choose After in Action. The Before, Next, Previous and (Re)Start actions are also available.


Why does my before/after slider move by itself when the page loads?


When a before/after slider scrolls into view on the published page, it animates to its Start pos. value, using the Duration and Easing settings. To show it without that movement, set Start pos. to 0%, or set Duration to 0 in the animation tab.

Updated on: 15/10/2026