Building a Before and After Image Slider.

Introduction

This post walks through building a before and after image slider that works on desktop and touch devices.

Get started with the HTML

We'll get started by adding the basic HTML required for the before and after image slider.

Adding the functionality with JavaScript

Now we can add all the functionality with JavaScript.

We're going to listen for any user interactions with the sliders .handle and based on that, we'll update the width of the before image.

It's important that we keep in mind devices that allow touch input (smartphones, tablets, etc.), as well as devices with non-touch inputs (desktop computers). The first time I built something like this I neglected touch devices and didn't catch the error for quite some time 😬.

Styling the before and after slider with CSS

Lastly, we can add some CSS to make things look pretty.

Example