Home Web Design CSS Before and After Image Slider Using CSS JavaScript | Comparison Slide

Before and After Image Slider Using CSS JavaScript | Comparison Slide

August 13, 2019

17911

How we can create before and after comparison slider using JavaScript and CSS? Solution: Before and After Image Slider Using CSS JavaScript, Comparison Slide.

Previously I have shared a Comparison Slider, but this time the slider is with resizing cursor and less JS codes. Basically, a comparison slider is used to compare two images or check before and after effects of elements. If you search on the internet for this type of program, you will get lots of JS codes but this has 2 lines of JS.

Today you will learn to create comparison slider using pure JavaScript and CSS. This program will help to gain your CSS and JS knowledge because the program is based on these. You also can use this on your website or project, that will be fun. In this program, most of the functions based on CSS.

So, Today I am sharing Before and After Image Slider Using CSS and JavaScript. There are two images on is black & white and another is colorful, there is a slider range on the middle of two images and its works as a compare slider. This has a responsive design, and I have also placed extension codes like –WebKit –Moz, etc for supporting multiple browsers.

If you are thinking now how the before and after slider actually is, then see the preview given here below.

Preview of Comparison Image Slide

See this video preview to getting an idea of how this slide looks like.

Live Demo

Now you can see this visually, You also can see it live by pressing the button given above. If you like this, then get the source code of its.

Before and After Image Slider Using CSS JavaScript Source Code

Before sharing source code, let’s talk about it. First I have created the main div with class name ‘container‘ inside it, I have placed another div and an input range. For creating the input range I have used HTML <input type="range"> element and gave minimum value 0 and maximum 100, by default at starting its value is 50.

In the input range, I have placed a javascript function two times first for oninput="beforeAfter()" (info) and second for onchange="beforeAfter()" . Now in the CSS file, I have done lots of works, like placing all the elements, place slider, etc. In the figure section, I have placed two images with absolute position and 50% width.

Now javascript detect the range slider using the function we have placed in HTML file. JS fetch the slider range status which is between 0 and 100 and put the same % of width to the image. That is the whole concept, left other things you will understand easily after getting the codes.

For creating this program you have to create 3 files, first for HTML, second for CSS and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>After Before Slider | Wevdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <figure>
    <div id="compare"></div>
  </figure>
  <input oninput="beforeAfter()" onchange="beforeAfter()" type="range" min="0" max="100" value="50" id="slider"/>
</div>
  <script  src="function.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>After Before Slider | Wevdevtrick.com</title>

</head>

<body>

</figure>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
	margin:0;
}
.container { 
	height: 73.5vw;
	margin: 1vw auto;
	max-height: 750px;
	max-width: 1000px;
	overflow: hidden;
	width: 98vw;
}
.container figure { 
	background-image: url(https://webdevtrick.com/wp-content/uploads/1st.jpg);
	background-size: cover;
	font-size: 0;
	height: 100%;
	margin: 0; 
	position: relative;
	width: 100%; 
}
#compare {
	background-image: url(https://webdevtrick.com/wp-content/uploads/2nd.jpg);
	background-size: cover;
	bottom: 0;
	border-right: 5px solid rgba(255,255,255,0.7);
	box-shadow: 10px 0 15px -13px #000;
	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#slider {
	-moz-appearance: none;
	-webkit-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#slider::-moz-range-track { 
	background: transparent; 
}
input#slider::-ms-track {
	border: none; 
	background-color: transparent;
	height: 100vw; 
	left: 0; 
	outline: none; 
	position: relative;
	top: -100vw; 
	width: 100%;
	margin: 0;
	padding: 0;
	cursor: col-resize;
	color:transparent;
}
input#slider::-ms-fill-lower {
	background-color:transparent;
}
input#slider::-webkit-slider-thumb {
	-webkit-appearance:none;
	height: 100vw;
	width: 0.5%;
	opacity: 0;
}
input#slider::-moz-range-thumb {
	-moz-appearance: none;
	height: 100vw;
	width: 0.5%;
	opacity: 0;
}   
input#slider::-ms-thumb {
	height: 100vw;
	width: 0.5%; 
	opacity:0;
}
input#slider::-ms-tooltip {
	display:none;
}
#compare::before {
	background: url(https://webdevtrick.com/wp-content/uploads/comparision.png) no-repeat scroll 0 center transparent;
	background-size:contain;
	content: " ";
	float: right;
	height: 100%;
	margin-right: -34px;
	position: relative;
	top:0;
	width: 64px;
}
@keyframes first {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}
@-webkit-keyframes first {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

margin:0;

}

.container {

height: 73.5vw;

margin: 1vw auto;

max-height: 750px;

max-width: 1000px;

overflow: hidden;

width: 98vw;

}

.container figure {

background-image: url(https://webdevtrick.com/wp-content/uploads/1st.jpg);

background-size: cover;

font-size: 0;

height: 100%;

margin: 0;

position: relative;

width: 100%;

}

#compare {

background-image: url(https://webdevtrick.com/wp-content/uploads/2nd.jpg);

background-size: cover;

bottom: 0;

border-right: 5px solid rgba(255,255,255,0.7);

box-shadow: 10px 0 15px -13px #000;

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#slider {

-moz-appearance: none;

-webkit-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#slider::-moz-range-track {

background: transparent;

}

input#slider::-ms-track {

border: none;

background-color: transparent;

height: 100vw;

left: 0;

outline: none;

position: relative;

top: -100vw;

width: 100%;

margin: 0;

padding: 0;

cursor: col-resize;

color:transparent;

}

input#slider::-ms-fill-lower {

background-color:transparent;

}

input#slider::-webkit-slider-thumb {

-webkit-appearance:none;

height: 100vw;

width: 0.5%;

opacity: 0;

}

input#slider::-moz-range-thumb {

-moz-appearance: none;

height: 100vw;

width: 0.5%;

opacity: 0;

}

input#slider::-ms-thumb {

height: 100vw;

width: 0.5%;

opacity:0;

}

input#slider::-ms-tooltip {

display:none;

}

#compare::before {

background: url(https://webdevtrick.com/wp-content/uploads/comparision.png) no-repeat scroll 0 center transparent;

background-size:contain;

content: " ";

float: right;

height: 100%;

margin-right: -34px;

position: relative;

top:0;

width: 64px;

}

@keyframes first {

0% {width: 0%; }

50% {width: 80%; }

100% {width: 50%; }

}

@-webkit-keyframes first {

0% {width: 0%; }

50% {width: 80%; }

100% {width: 50%; }

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
function beforeAfter() {
  document.getElementById('compare').style.width = document.getElementById('slider').value + "%";
}

// Code By Webdevtrick ( https://webdevtrick.com )

function beforeAfter() {

document.getElementById('compare').style.width = document.getElementById('slider').value + "%";

}

That’s It. Now you have successfully created Before and After Image Slider Using CSS JavaScript, Comparison Slide. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

5 COMMENTS

anand October 7, 2019 At 2:30 pm

how to add this in wordpress

Reply
shantal April 7, 2020 At 7:13 pm

hi, this works well with the Semplice theme for WordPress. However, is it possible to change the design of the slider? I want to make the line thinner and use a different arrow set.

Reply
Thomas H. November 20, 2020 At 11:55 am

Thank you for sharing this tip.

But do you think it is possible to do an automatic before and after picture comparison just like some amazon product have?

Reply
Jeff June 28, 2021 At 10:04 am

You can easily add it with LiveCanvas builder, you’ve just only to copy HTML CSS and JS code into the webpage!
Thanks!

Reply
Chris August 10, 2022 At 7:56 am

Great stuff thanks heaps!
Could you please tell me how to change so I can multiple before – after images on the same web page (just under each other)?

Reply