← Back toHTML DOM

Create an image comparison slider

Written byPhuoc Nguyen
06 Apr, 2020
Last updated
28 Jun, 2021
Level 3 — Advanced
In this post, we'll create a slider for comparing two images visually. The slider has three elements organized as below:
<div class="container">
<!-- Show the modified image -->
<div class="modified-image"></div>

<!-- The resizer -->
<div class="resizer" id="dragMe"></div>

<!-- The original image -->
<img src="/path/to/original/image.png" />

The markup

Initially, the modified image will take half width of the container. It's positioned absolutely to the container:
.container {
position: relative;
.modified-image {
/* Absolute position */
left: 0;
position: absolute;
top: 0;

/* Take full height and half width of container */
height: 100%;
width: 50%;
We don't use the `img` tag to display the modified image here because the image could be scaled. Instead, we use the modified image as the background of modified element:
<div class="modified-image" style="background-image: url('/path/to/modified/image.png')"></div>
The modified element uses more styles for showing the background image at desired position:
.modified-image {
background-position: top left;
background-repeat: no-repeat;
background-size: auto 100%;
It's a lot easier to set the position for the resizer. It is displayed at the center of container:
.resizer {
/* Absolute position */
left: 50%;
position: absolute;
top: 0;

/* Size */
height: 100%;
width: 2px;

/* Background */
background-color: #cbd5e0;

/* Indicate that it can be resized */
cursor: ew-resize;

Handle the events

When user moves the resizer, we calculate how far the mouse has been moved. Then set the position for the modified and resizer elements based on the current mouse position.
For more information about the idea, you can look at the create resizable split views post. Here is the piece of code:
// Query the element
const resizer = document.getElementById('dragMe');
const leftSide = resizer.previousElementSibling;

// The current position of mouse
let x = 0;
let y = 0;

// The width of modified element
let leftWidth = 0;

// Handle the mousedown event
// that's triggered when user drags the resizer
const mouseDownHandler = function (e) {
// Get the current mouse position
x = e.clientX;
y = e.clientY;
leftWidth = leftSide.getBoundingClientRect().width;

// Attach the listeners to `document`
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);

const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - x;
const dy = e.clientY - y;

let newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
newLeftWidth = Math.max(newLeftWidth, 0);
newLeftWidth = Math.min(newLeftWidth, 100);

// Set the width for modified and resizer elements
leftSide.style.width = `${newLeftWidth}%`;
resizer.style.left = `${newLeftWidth}%`;

// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);
When user moves the mouse around, we have to make sure that the mouse isn't moved to out of the container. That's why we have to compare the `newLeftWidth` with 0 and 100 percentages:
const mouseMoveHandler = function(e) {

newLeftWidth = Math.max(newLeftWidth, 0);
newLeftWidth = Math.min(newLeftWidth, 100);
Below is the demo that you can play with.


See also

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Ask me questions

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn