Image Comparison Slider using HTML, CSS and Javascript

Image Comparison Slider using HTML, CSS and Javascript

In this article, I have shown how Image Comparison Slider is created using HTML, CSS, and JavaScript. Earlier I shared with you how to create different types of image galleries and sliders.

Image Comparison Slider basically helps to differentiate between two images or products. As a result, the user can easily understand which of the two products is better.

Image Comparison Slider using HTML, CSS and Javascript

 As you can see in the image above it is a beautiful one image comparison slider in HTML and CSS. The popularity of this type of design is slowly increasing. 

This type of design is widely used in various industries such as e-commerce sites or product review sites. Here you can easily tell the difference between the two types of products or images.

 The most important point of this slider is that the images can be made as big and small as needed. Below I have given a live demo of this design.

See the Pen
Awesome Image Comparison Slider by Foolish Developer (@fghty)
on CodePen.

Below the article is the required source code. If you want to download the source code, you can use the download button at the bottom of the article.

Simple Image Comparison Slider with Javascript

In the following tutorial, I have shown you how to create a beautiful image comparison slider using JavaScript. Let me tell you something about this design before sharing the tutorial. 

First I designed that page. Then I made a beautiful box. That box is the basic structure of the slider where I used two images. There is a border in the middle of these two images and there is a control button.

I designed the whole slider with the help of HTML and CSS. Here we have used some amount of JavaScript to implement Comparison.

Step 1: Design the web page

I have used the following CSS codes to design the webpage. Here background-color I have used light blue and height 100vh has been used.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: grid;
    background: #d1ebec;
    place-items: center;
}
Design the web page

Step 2: Create the basic structure of the Image Comparison Slider

The following HTML and CSS codes are used to create most of the structure of the Image Comparison Slider. Here I have used the slider height 62.5vmin and width 100vmin. A border of 5 pixels and a box of shadows have been used to enhance the beauty.

<div class=”container”>
 
</div>
.container{
    height: 62.5vmin;
    width: 100vmin;
    position: relative;
    overflow: hidden;
    border: 5px solid #bfc0c1;
    box-shadow:-3px 5px 15px #000;
}
Create the basic structure of the Image Comparison Slider

Step 3: Add the first image in the slider

Now I have added the image first. Its length and height are kept equal with the slider.

 <img src=”img1.jpg”>
img{
    width: 100%;
    height: 100%;
    position: absolute;
}
Add the first image in the slider

Step 4: Add a second image in the Comparison slider

I have used the second image using the following codes. I have used a clip-path so that half of the second image can be seen here. If you do not know the basic concept of clip-path: polygon, then follow the image below.

<img id=”my-img” src=”img2.jpg”>
#my-img{
    clip-path: polygon(0 0 , 50% 0, 50% 100%, 0 100%);
}

clip-path

Add a second image in the Comparison slider

Step 5: Create a range control button

Now I have created a control button that will control the range of this slider. Here the minimum value I gave is zero and the maximum is 100. Here value 50 is used which means by default it will be in the middle of the slider.

<input type=”range” min=”0″ max=”100″ value=”50″ id=”slider” oninput=”slide()”>
#slider{
    position: relative;
    -webkit-appearance: none;
    width: calc( 100% + 40px);
    height: 100%;
    margin-left: -20px;
    background-color: transparent;
    outline: none;
}
#slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 45px;
    width: 45px;
    background: url(“slider-icon.svg”),
    rgba(255,255,255,0.3);
    border: 4px solid white;
    border-radius: 50%;
    background-size: contain;
    cursor: pointer;
}
Create a range control button

Step 6: Activate the Image Comparison Slider with JavaScript

I have implemented this Image Comparison Slider using the following JavaScript. First I set a constant of the id of the control button.
Below I have given a picture to better understand the structure of JavaScript.

function slide(){
    let slideValue = document.getElementById(“slider”).value;
    document.getElementById(“my-img”).style.clipPath = “polygon(0 0,” + slideValue + “% 0,” + slideValue + “% 100%, 0 100%)”;
    console.log(“polygon(0 0,” + slideValue + “% 0,” + slideValue + “% 100%, 0 100%)”);
}

Activate the Image Comparison Slider with JavaScript

Simple Image Comparison Slider with Javascript

Hopefully, you have learned from the above tutorial how I made this Image Comparison Slider using HTML CSS, and JavaScript. If you have any problems, you can definitely let me know by commenting.