Before/After Slider

Before/After Slider is a drag-to-compare block that stacks two images in the same frame and lets visitors reveal either side by moving a handle. Use it for product comparisons, photo retouching demos, design before/after — any two states of the same subject.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Before/After Slider. The block drops in as a placeholder. Set both images in the sidebar to activate the slider.

Images

The Images panel has two independent pickers — Before and After. Each shows a thumbnail preview once an image is selected.

• Select image — opens the media library
• Replace — swaps the current image without losing other settings
• Remove — clears the image and returns to the placeholder state

The block renders nothing on the frontend until both images are set.

Labels

Enable Show labels to overlay a text chip on each side of the frame.

• Before label — defaults to Before
• After label — defaults to After

Labels are hidden by default. When disabled, neither label field appears in the sidebar. Their color, background, typography, and corner radius live in Styles → Labels.

Behavior

Orientation

• Horizontal — the divider runs vertically and moves left/right. The default.
• Vertical — the divider runs horizontally and moves up/down, revealing the after image from the top. Useful for tall subjects — a full-length photo retouch, a landing page redesign.

Interaction

• Drag — the visitor presses and pulls the handle. The default, and the right choice on touch.
• Hover — the handle follows the pointer as it passes over the image, no click needed. Feels immediate on desktop, but has no touch equivalent, so the slider stays draggable on phones either way.

Slider

Initial position

Where the handle starts when the block loads, as a percentage from the left (or from the top, in vertical orientation). Default is 50. Set it lower to reveal more of the After image on load, higher to reveal more of the Before image.

Aspect ratio

Controls the frame's height.

When a fixed ratio is set, both images fill the frame with object-fit: cover.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the slider does; Styles is how it looks, organised by the parts you can see.

Styling

The Handle and Line colors default to white. Set them to something contrasting if your images are light near the center — a white handle on a bright sky is invisible.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

Interaction and accessibility

The slider works across pointer and touch devices. Dragging and click-to-jump both work regardless of the Interaction setting; Hover adds pointer tracking on top.

• Drag — press anywhere on the frame and pull to move the handle
• Click to jump — clicking a point on the frame snaps the handle there
• Keyboard — when the frame has focus:

Both arrow pairs work in either orientation, so keyboard users are never stranded by the Vertical setting. The frame carries role="slider" and updates aria-valuenow on every move.

HTML output

<div class="axiom-blocks-bas" style="--ab-bas-radius-tl: 12px; --ab-bas-shadow: 0 10px 30px #0000001a; --ab-bas-maxw: 900px;">
  <div
    class="axiom-blocks-bas__frame is-aspect-fixed is-vertical is-hover"
    style="--slider-pos: 50%; --handle-color: #ffffff; --line-color: #ffffff; aspect-ratio: 16 / 9;"
    role="slider"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="50"
    aria-label="Before / after image comparison"
    tabindex="0"
  >
    <img src="/wp-content/uploads/after.jpg" alt="After"
         class="axiom-blocks-bas__img axiom-blocks-bas__img--after" draggable="false" />
    <img src="/wp-content/uploads/before.jpg" alt="Before"
         class="axiom-blocks-bas__img axiom-blocks-bas__img--before" draggable="false" />
    <span class="axiom-blocks-bas__label axiom-blocks-bas__label--before">Before</span>
    <span class="axiom-blocks-bas__label axiom-blocks-bas__label--after">After</span>
    <div class="axiom-blocks-bas__line" aria-hidden="true"></div>
    <div class="axiom-blocks-bas__handle" aria-hidden="true"><!-- chevron SVG --></div>
  </div>
</div>

The frame picks up is-aspect-auto instead of is-aspect-fixed when Aspect ratio is Auto (and no inline aspect-ratio), is-vertical only in vertical orientation, and is-hover only when Interaction is Hover.

CSS custom properties

The divider properties are set on .axiom-blocks-bas__frame; the styling properties are set on the outer wrapper.