Making a Responsive Image Comparison Slider in CSS and JavaScript

Ege Görgülü
Jotform Stories
Published in
4 min readMar 6, 2015
Credit: Marvel Studios

TL;DR:

We have created a lightweight, responsive image comparison slider that works on any layout and size. It’s open source: Go and grab it here. Codepen demo here.

Image Comparison Sliders are a great way to present before and after cases, this is especially the case when the differences are very small.

A month ago Adobe FormsCentral announced its closure. We knew that hard times would be ahead for FormCentral users so we decided to build an import tool that would ease the transfer process to JotForm. We quickly built a FormsCentral Import page to welcome new FormsCentral users to our service.

The New Import Wizard ended up being so good that the differences between the original and imported forms were barely noticeable. We first tried to show the before and after versions in two separate screenshots side by side, but they were so similar it looked like we used the same image twice. We needed a creative way to show the barely noticeable differences. So we decided to use a comparison slider.

From: http://www.jotform.com/formscentral/

Comparison sliders are nothing new. There are even pure CSS implementations that are the works of true masters. However, I wasn’t able to find a truly responsive one that was simple enough for our needs. This gave me the chance (and excuse) to build one myself that can be used anywhere.

This is the story of how we built an
image slider for our FormsCentral Import page.

SETTING THE STAGE

While I’m sure this can be handled without any dependencies, I used jQuery for ease of development.

Let’s start. First up, the HTML:

This, unfortunately, can not get any simpler for the purposes of a truly responsive comparison slider. The extra .resize div is needed for clipping the second image. Hopefully, with better clip-path support in the future, this can be done without it. In fact, if shadow-dom manipulation in JS picked up some pace along with clip-path, this can be done in just 2 divs using pseudo-elements. But until then, this is what we have.

Similarly, Lea Verou’s pure css implementation uses the resize property which can only initiate the drag interaction on a relatively smaller area. Even with the stretched version mentioned in her edit, the styling options are highly limited.

Next up, we set the stage by adding some CSS.

The main issue in making a comparison slider responsive is placing the second image on top of the first one and declaring a width based on a grandparent (.slider in this case). Dudley Storey circumvents this by using vw and vh units and setting max-height and max-width, however, this is not always ideal when working with a grid, i.e. bootstrap.

That’s why I’ve decided to add this script to manually set the width for the second image on page load. This will allow us to not worry about fine-detailing the slider itself for each responsive breakpoint. It will simply fit into your grid.

ADDING THE INTERACTION

Now that the groundwork has been laid, we can move onto the sliding action. Let’s start by styling the knob and the separator:

So everything is pretty much set, we just need to make this come to life by implementing the drag functionality. Claudia Romano over at CodyHouse pretty much perfected this, so I’ll be using her function here with some small improvements.

Basically, we’ll find the initial position on mousedown, listen to mousemove for calculating and applying the drag distance and finally bind the mouseup events to stop dragging.

WRAPPING IT UP

Finally, we call the drags function, tie everything together on document.ready and voila!

So, there you have it. I’m already working on turning this into a jQuery plugin but, hopefully, this will help a few people in need and spark some ideas until then.

Credit: Marvel Studios.

P.S. We open sourced the Before & After Image Comparison Slider under the MIT license: before-after.js. We hope it will save developers time, and that they will use in their own projects. Feel free to fork it, comment, or send pull requests.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (4)

What are your thoughts?