How To Create Image Comparison Slider With CSS & JS Only!!!

Image Comparison slider usually gives the opportunity to the user to differentiate between two images. We often use some jQuery plugin to create this kind of slider though we can create that with few lines of js & CSS Code. So, let’s make one.

Step 1: First of all we need to add some HTML markup for our slider.

<div class="before-after-container">
    <figure>
        <div id="before_after"></div>
    </figure>
    <input oninput="callBeforeAfter()" onchange="callBeforeAfter()" type="range" min="0" max="100" value="50" id="before_after_slider">
</div>

Step 2: Now Add the following CSS code to your .css file

.before-after-container {
    aspect-ratio: 1/1;
    background: #fff;
    width: 100%;
    overflow: hidden;
    height: 627px;
    transition: all 0.3s ease-in-out;
}

.before-after-container figure {
    background-image: url(../img/img-2.webp);
    position: relative;
    margin: 0;
    background-size: cover;
    width: 100%;
    height: 100%;
}

#before_after {
    background-image: url(../img/img-1.webp);
    background-size: cover;
    bottom: 0;
    border-right: 4px solid rgba(255, 255, 255, 0.95);
    height: 100%;
    max-width: 98.6%;
    min-width: 0.6%;
    overflow: visible;
    position: absolute;
    width: 50%;
    animation: first 2s 1 normal ease-in-out 0.1s;
    -webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}

input#before_after_slider {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    cursor: col-resize;
    height: 100vw;
    left: 0;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    top: -100vw;
    width: 100%;
}

input#before_after_slider::-moz-range-track {
    background: transparent;
}

input#before_after_slider::-ms-track {
    border: none;
    background-color: transparent;
    height: 100vw;
    left: 0;
    top: -100vw;
    width: 100%;
    margin: 0;
    padding: 0;
    outline: none;
    position: relative;
    cursor: col-resize;
    color: transparent;
}

input#before_after_slider::-ms-fill-lower {
    background-color: transparent;
}

input#before_after_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 100vw;
    width: 0.5%;
    opacity: 0;
}

input#before_after_slider::-moz-range-thumb {
    -moz-appearance: none;
    height: 100vw;
    width: 0.5%;
    opacity: 0;
}

input#before_after_slider::-ms-thumb {
    height: 100vw;
    width: 0.5%;
    opacity: 0;
}

input#before_after_slider::-ms-tooltip {
    display: none;
}

#before_after::before {
    background: url(../img/slider-btn.svg) no-repeat scroll 0 center transparent;
    background-size: contain;
    content: " ";
    float: right;
    height: 100%;
    margin-right: -39px;
    position: relative;
    top: 0;
    width: 75px;
}

@keyframes first {
    0% {
        width: 0%;
    }

    50% {
        width: 80%;
    }

    100% {
        width: 50%;
    }
}

Note: Don’t forget to change the default image file path with yours one.

Step 3: Add these js code in your external .js file

function beforeAfter() {
    document.getElementById("before_after").style.width =
    document.getElementById("before_after_slider").value + "%";
}
function callBeforeAfter() {
    beforeAfter(); // Call the function
}

Or you can add following js code inside <script> tag in same .html file

function beforeAfter() {
    document.getElementById("before_after").style.width =
    document.getElementById("before_after_slider").value + "%";
}

Happy Coding!!!