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.
You May Also Like:
- JS Gradient Direction Navigation
- Circular Progress Bar
- Multi Step Form Using JavaScript
- JavaScript Google Font Manager
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
|
1 2 3 4 |
// 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.
how to add this in wordpress
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.
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?
You can easily add it with LiveCanvas builder, you’ve just only to copy HTML CSS and JS code into the webpage!
Thanks!
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)?