Image Comparison Slider using HTML, CSS and Javascript
Tags: html, css, webdev, beginners
Published: 2021-09-22 16:11:45

In this article, I am going to show you how to create Image Comparison Slider using HTML, CSS, and JavaScript.

[Image Comparison Slider](https://groundtutorial.com/image-comparison-slider-in-html-css-javascript/) basically helps to differentiate between two images or products. As a result, the user can easily understand which of the two products is better.

You can [watch the live demo](https://www.foolishdeveloper.com/2021/09/image-comparison-slider-with-javascript.html) to see how it works. 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.

In the following tutorial, I have shown you how to create a beautiful image comparison slider using JavaScript.

### 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.
```css
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: grid;
    background: #d1ebec;
    place-items: center;
}
```
![Design the web page](https://1.bp.blogspot.com/-ETF7Uwmc-fM/YUkC4pX_M_I/AAAAAAAABqQ/mNfF9vxLJes2FYxINUQKzc52t9My035lwCLcBGAsYHQ/s16000/Screenshot%2B%2528670%2529%2B%25281%2529.jpg)
 
### Step 2: Create the basic structure
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.

```html
<div class="container">
 
</div>
```
```css
.container{
    height: 62.5vmin;
    width: 100vmin;
    position: relative;
    overflow: hidden;
    border: 5px solid #bfc0c1;
    box-shadow:-3px 5px 15px #000;

}
```
![Create the basic structure](https://1.bp.blogspot.com/-OLrbeNQUwGw/YUkDF7jDWHI/AAAAAAAABqU/YB1vGbtvi4Uo0l_OrxAMkgSF0sbNNez4ACLcBGAsYHQ/s16000/Screenshot%2B%2528670%2529.jpg)
 
### 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.

```html
<img src="img1.jpg">
```
```css
img{
    width: 100%;
    height: 100%;
    position: absolute;
}

```
 ![Add the first image in the slider](https://1.bp.blogspot.com/-SUsQlTyEDcs/YUkEX1KggjI/AAAAAAAABrE/hEMoNmaUJuAJ3DWmDg8UraJ_n0RGB7bJACLcBGAsYHQ/s16000/Screenshot%2B%2528670%2529%2B%25282%2529.jpg)
### 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.

```html
<img id="my-img" src="img2.jpg">
```
```css
#my-img{
    clip-path: polygon(0 0 , 50% 0, 50% 100%, 0 100%);
}
```
 ![clip-path](https://1.bp.blogspot.com/-1N5do1EyuH8/YUpTKGd9LGI/AAAAAAAABr4/Q5cRR8ATYhwJaQi20IhuYCnAIaohj41kwCLcBGAsYHQ/s16000/clipPath%2Bpolygon%2B1.jpg)
 ![Add a second image in the Comparison slider](https://1.bp.blogspot.com/-Noq0HIYNp3U/YUkDhcE165I/AAAAAAAABqo/xCrbgJZXfAQVyvQNjZ-AE9lSWUub1AOjgCLcBGAsYHQ/s16000/Screenshot%2B%2528670%2529%2B%25283%2529.jpg)

 
### 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.

```html
<input type="range" min="0" max="100" value="50" id="slider" oninput="slide()">
```
```css
#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](https://1.bp.blogspot.com/-50awKmsCaQk/YUkDbMDn8AI/AAAAAAAABqk/G5xC5_E1gRUqQvfAIBWIR6DaKEdWyHP8gCLcBGAsYHQ/s16000/Screenshot%2B%2528670%2529%2B%25284%2529.jpg)
### 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.
```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](https://1.bp.blogspot.com/-0tzNJ5jaPWQ/YUpTkwiveMI/AAAAAAAABsA/ixxeLxHIaV4TNArSJr0nu3jKuISErSV8gCLcBGAsYHQ/s16000/Untitledffeere.jpg)
![Image Comparison Slider using HTML, CSS and Javascript](https://1.bp.blogspot.com/-3LigTkawHnE/YUkDr9fTHtI/AAAAAAAABq0/cwpYMxnURos3gWQez1zouWuh9F921N_4gCLcBGAsYHQ/s16000/Screenshot%2B%2528670%2529%2B%25285%2529.jpg)
Hopefully, you have learned from the above tutorial how I made this Image Comparison Slider using HTML CSS, and JavaScript. 

You can visit my blog for more tutorials like this.
https://groundtutorial.com/