How to Create: Image Comparison Slider
- Previous Page Image Magnifier
- Next Page Website Icon
Learn how to create a slider to compare two images.
Image comparison slider
Move the blue slider to compare images:

Create an image comparison slider
Step 1 - Add HTML:
<div class="img-comp-container"> <div class="img-comp-img"> <img src="img_snow.jpg" width="300" height="200"> </div> <div class="img-comp-img img-comp-overlay"> <img src="img_forest.jpg" width="300" height="200"> </div> </div>
Step 2 - Add CSS:
The container must have 'relative' positioning.
* {box-sizing: border-box;} .img-comp-container { position: relative; height: 200px; /* Should be the same as the image height */ } .img-comp-img { position: absolute; width: auto; height: auto; overflow: hidden; } .img-comp-img img { display: block; vertical-align: middle; } .img-comp-slider { position: absolute; z-index: 9; cursor: ew-resize; /* Set the slider's appearance: */ width: 40px; height: 40px; background-color: #2196F3; opacity: 0.7; border-radius: 50%; }
Step 3 - Add JavaScript:
function initComparisons() { var x, i; /* Find all elements with the "overlay" class: */ x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { /* Execute once for each "overlay" element: When executing the compareImages function, pass the "overlay" element as a parameter: */ compareImages(x[i]); } function compareImages(img) { var slider, img, clicked = 0, w, h; /* Get the width and height of the img element */ w = img.offsetWidth; h = img.offsetHeight; /* Set the width of the img element to 50%: */ img.style.width = (w / 2) + "px"; /* Create the slider: */ slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); /* Insert the slider: */ img.parentElement.insertBefore(slider, img); /* Place the slider in the middle: */ slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; /* Function executed when the mouse button is pressed: */ slider.addEventListener("mousedown", slideReady); /* Another function executed when the mouse button is released: */ window.addEventListener("mouseup", slideFinish); /* Or touch (for touchscreens: ) */ slider.addEventListener("touchstart", slideReady); /* And release (for touchscreens: ) */ window.addEventListener("touchend", slideFinish); function slideReady(e) { /* Prevent any other operations that may occur while moving on the image: */ e.preventDefault(); /* The slider has been clicked and is ready to move: */ clicked = 1; /* Function executed when the slider moves: */ window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { /* Stop clicking on the slider: */ clicked = 0; } function slideMove(e) { var pos; /* Exit this function if the slider is no longer clicked: */ if (clicked == 0) return false; /* Get the x position of the cursor: */ pos = getCursorPos(e) /* Prevent the slider from being outside the image: */ if (pos < 0) pos = 0; if (pos > w) pos = w; /* Execute a function to adjust the size of the overlay image based on the cursor: */ slide(pos); } function getCursorPos(e) { var a, x = 0; e = (e.changedTouches) ? e.changedTouches[0] : e; /* Get the x position of the image: */ a = img.getBoundingClientRect(); /* Calculate the x coordinate of the cursor relative to the image: */ x = e.pageX - a.left; /* Consider any page scrolling: */ x = x - window.pageXOffset; return x; } function slide(x) { /* Adjust the image size: */ img.style.width = x + "px"; /* Position the slider: */ slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } }
Step 4 - Execute script:
<script> initComparisons(); </script>
- Previous Page Image Magnifier
- Next Page Website Icon