Make a Image comparison slider

Whenever we have to compare two images , to show before and after images or to differentiates between two image filter we users image comparison slider. For example, If you want to differentiate between HD and SD quality of photos , you use image comparison slider.

Now without talking much unnecessarily , let's take a jump into code.

CREATING MARKUP
This image slider can be a smallest slider code.As I have seen many of the libraries for image comparison from small to big.Some of they using Jquery , whereas some uses pure JavaScript.
Here I'm going to make this slider with pure JavaScript and the best thing is all the  JavaScript is fitted inside the HTML attribute.So you don't have to add JavaScript separately.

<div id="imgcomp">
<br>
<figure>
<div id="divider" style="width: 50%;">
</div>
</figure>
<input autocomplete="off" id="slider" max="100" min="0" oninput="var divider,slider;if(divider==null) divider=document.getElementById('divider');if(slider==null)slider=document.getElementById('slider');divider.style.width=slider.value+'%';" type="range" value="50">
</div>

First of all a division named imgcomp wrap all the slider.Inside that , first image will be inside another division named divider which will change its width when the <input type=" range" will changes its width.

WHERE TO PUT IMAGES?
Don't worry for now!we will add images in css.:) But before that have a look at the JavaScript.

FUNCTION HANDLING WITH JAVA-SCRIPT
You don't have to add separate JavaScript nor any library or Jquery as it is made with pure JavaScript. As can be seen , the code is inside the oninput attribute.The same code is given below just for reading.

var divider,slider;

if(divider==null) divider=document.getElementById('divider');

if(slider==null)
slider=document.getElementById('slider');

divider.style.width=slider.value+'%';

As can be written on the last line , Divider width is changed as slider changes its width.Slider changes its width when we drags it.

STYLING WITH CSS

Now let's see the css code required.Both the images are inserted as background images in this css. The image visible as the 'after' , or the main image you can set in div#imgcomp's background image.The image  will be sided , or the 'before' image that you have to set in the division inside figure element.

div#imgcomp {
width: 600vw;
height: 100vw;
max-width: 640px;
max-height: 360px;
overflow: hidden; }
div#imgcomp figure {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3l3Dj5gJBuozmffxhVSOCPOEVfzoXyCuEoI-yfOcWm4tX3JDNaMT2NWJmfTI_JGvFkOM2Nhnkwb7d6uWsFcChyg5_MOsPETVOZJrfaluRVQRQgJcPFSOmmpyQfjR56wwNcuZQ3jsbiESW/s1600/Baahubali-after-vfx-effect-image.jpg);
background-size: cover;
position: relative;
font-size: 0;
width: 100%;
height: 100%;
margin: 0;
}
div#imgcomp figure > img {
position: relative;
width: 100%;
}
div#imgcomp figure div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuXXq9P-b1Lxu1uXFjzg02ip1HfXofVCDT88v8Xjuso1vsDN6xYZXjkNbuKoOIozEhRul032cZGmS5Rs9PUng4_RwXf6L40UoUYmmyiTVQgZxi6t2s0PD1Ft55wDYrfbXABqz4eFoJuhbE/s1600/Baahubali-before-vfx-effect-image.jpg);
background-size: cover;
position: absolute;
width: 50%;
box-shadow: 2px 0px white;
overflow: hidden;
bottom: 0;
height: 100%;
}

input[type=range]{
-webkit-appearance:none;
-moz-appearance:none;
position: relative;
top: -2rem; left: -1%;
background-color: rgba(255,255,255,0.1);
width: 102%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:active {
outline: none;
}

input[type=range]::-moz-range-track {
-moz-appearance:none;
height:20px;
width: 98%;
background-color: rgba(255,255,255,0.1);
position: relative;
outline: none;
}
input[type=range]::active {
border: none;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
width: 20px; height: 20px;
background: white;
border-radius:0;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px;
height: 20px;
background: white;
border-radius: 0;
}
input[type=range]:focus::-webkit-slider-thumb {
background: white;
}
input[type=range]:focus::-moz-range-thumb {
background: white;
}

Copy above code into your HTML's style tag.Change image url's.

Note that the both images should have same width and height.You can make changes in the css code the satisfy your needs

TIME FOR THE LIVE PREVIEW
As I have made a live preview here , but I have also made a Jsfiddle to get you to do experiment with the code.

LINK TO JSFIDDLE

CONCLUSION
As you can easily implement this slider tool to your website even on blog very quick.As the code is very little made with pure JavaScript , it loads very fast.If you have any queries to ask , please comment down below and keep following us on our Facebook page here.

• Tweet
• Share
• Share
• Share
• Share