Before / After Image

Give site visitors a simple way to compare two images. Comes with a range of customisations, with the images being nested inside the elements, for full styling possibilities. (as well as adding any extra elements inside if you want). Supports both horizontal and vertical type sliders and is keyboard accessible.

Setting up the element

The images are two nested image elements .

You’ll find them inside of the Before / After Image element in the structure panel. Simply change the images, choose the size, add the ‘alt’ text etc as you would when dealing with any other image element.

There are optional labels that can be enabled from the settings, which can be positioned/styled to your liking. But you can also nest elements if you wish to add something custom to overlay the images. (You’d just need to absolute position them, for eg as we’re doing with a nested heading in the image above)

General Settings

Start position – By default the start position is 50, meaning the control slider starts in the center at page load. This can be changed from 0-100.

Direction – Two separate types – vertical or horizontal.

Height – By default, the height will be determined by the image heights (the second one taking priority if different). If you need to force the height, set it here. Note that the images will always take up the full width of the element. (if needing object-fit, apply onto the images themselves)

Aspect ratio – If you need to force an aspect ratio, you can set it here. Make sure there’s no height set, as it would override it. eg 16/9 would make sure the aspect ratio is preserved across device widths, similar to if the images actually had the 16/9 aspect ratio.

Here our recommendation is to always just choose the correct image size to begin with rather than forcing heights or aspect ratios.

Slider Control

The slider control which allows the user to move between images is built into the element. The settings here allow you to customise the style of the control itself and the line styles.

By default, if the user tabs to the element by keyboard to control the slider, a black border will appear (similar to all Bricks’ focusable elements). The background colour, border and icon colours have their own focus styles so this can be customised to taste.

Slider Icons

The two icons can be changed (or removed) and styled from these settings. If you want to replace with just one icon, just remove the icon right. The left icon will then center itself and take over as the only icon.

Labels

For convenience there are two labels built in which can be enabled. By default they are positioned in the top right and bottom left, so suit either the vertical or horizontal layout. These can be customised, but if you’re looking to add something other than just a label on top of the image slider, you can instead nest elements (alongside the blocks) and absolute position them. There needs to be a z-index set to make sure they appear above the images.

Image Styling

For a quick way to add filters to either image, this can be done straight from the settings. Useful for blurring, or changing one to black and white etc. As the images are just nested image elements, for more style control select the images themselves inside the structure panel and style as you would any other image element.

User Interaction

The entire element is essentially a range slider, so users interact with it in the same way they would with any range slider input. This means clicking/tapping anywhere along the slider (in this case the images) to move the position. Also dragging by grabbing the slider control and moving it in the direction needed.

Allow cursor move to control slider – For desktop users, you may wish to allow the user to hover over the image slider to move the slider.

Touch Height / Width – For touch devices, users can either move the slider by pressing/clicking on the images where they wish for it to move. Or they can touch the slider control to drag the slider. The touch height/width settings are so you can control how large of an area is draggable by touching. This is useful if you have a design where the slider control is quite small, but wish for the user to be able to touch a larger area to drag the slider.

See image below for an exaggerated example, where the mobile design has an extremely small control for the slider. Setting a much larger height/width for the touch area (as shown in red) would make it easier for users to drag the control with their finger.

Some notes on the built-in accessibility..

  • The interactive part of the image slider is created using a range slider. This means the input can used changed by using the left/right keys when the element is in focus to control via keyboard.
  • For touch device users, the entire images can be clicked on to move the slider. The actual slide itself can be dragged with a finger, we added the option to increase the area that would need to be dragged, to make it a much larger area than the control will appear on the screen, to be easier to control.
  • The default aria label value on the input slider is “Percentage of image visible”, which relates to the position of the control, values from 0 to 100.
  • The visible slider line/control and icons are all hidden from screen readers with aria hidden.

Keyboard Interactions

Key Action
Left/Right When element in focus, will moves slider to reveal the image