Image Comparison - before & after Bricks Builder

How I Implemented an Image Comparison Slider in Bricks Builder

Working with Bricks Builder regularly, I recently cam across the challenge of adding a before & after slider in Bricks.

I found a sleek solution using a web component from sneas.io. You can add the code with static images or dynamic images using custom fields.

Why Bricks Doesn’t Have This Natively

While Bricks Builder is incredibly flexible and powerful (I am a huge fan), it doesn’t come with a native image comparison slider. Which is honestly fine since Dimah's web component is not to hard to implement if you know you way around HTML.

The Static Implementation

The quickest way to get an image comparison slider working is with a static embed. Here’s how I did it:

1. Enable Code Execution in Bricks
   Ensure that the Bricks editor allows custom HTML/JS.
2. Insert a Code Block
   In the Bricks editor, add a Code element and paste the following snippet:
   • <!-- Sourced from: https://img-comparison-slider.sneas.io/ --> <img-comparison-slider> <img slot="first" src="https://link-to-your-file" width="600" height="600"/> <img slot="second" src="link-to-your-file" width="600" height="600"/> </img-comparison-slider> <script defer src="https://unpkg.com/img-comparison-slider@7/dist/index.js"></script> This gives you a fully functional, static image comparison component right on the page.

The Dynamic Implementation (With Custom Fields)

For projects requiring dynamic content — such as client-managed before/after images — I took it a step further:

1. Enable Code Execution
   As before, make sure custom code can be added safely in Bricks.
2. Allow Custom HTML Tags
   By default, Bricks strips out unknown HTML tags. To use <img-comparison-slider>, we need to whitelist it. Add this to your functions.php:
   • add_filter( 'bricks/allowed_html_tags', function( $allowed_html_tags ) { $additional_tags = ['img-comparison-slider']; return array_merge( $allowed_html_tags, $additional_tags ); } ); Official Bricks Docs
3. Create the Structure in Bricks
   • Add a Custom HTML element and use the tag
     • <img-comparison-slider>.
   • Inside this tag, add two image elements with dynamic data bindings: html
     • <img slot="first" src="{YOUR_DYNAMIC_IMAGE_1}" />
     • <img slot="second" src="{YOUR_DYNAMIC_IMAGE_2}" />
   • Close the component with
     • </img-comparison-slider>.
4. Add the Script Block
   Below the comparison container, insert another code block with:
   • <script defer src="https://unpkg.com/img-comparison-slider@7/dist/index.js"></script>
     This ensures the slider component is properly loaded and functional on the front end.

This method lets me seamlessly integrate a performant and responsive image comparison slider into any Bricks layout — with support for both static and dynamic content. It's elegant, dependency-light, and makes full use of modern web standards.