Absolutely amazing! It's a very creative and smart idea to use an input with the range type here. It was very interesting and informative, thank you, Chris!
this is such a good solution, i attempted to build this on my own before deciding to see how other's are doing it. this is so insightful how much little JavaScript you need to get things done. thanks for doing this, God bless you 🙏🏽
Saw this video on the same topic several months ago: th-cam.com/video/AZVAAydWTj4/w-d-xo.html After watching Chris's video, it's obvious Chris's solution is 10x better. Again, great video. You nailed this one! 👏
Hey, thanks so much! I looked quickly and everything looked way over engineered, so I just came up with my own. Haha I’m sure there are ways to make it even better!
Thank you for this, fantastic! I was doing it quickly, and it wouldn't work, then, of course, in js I found that I used normal single quote marks instead of the back ones. I works like magic :)
I want more information on how to use this on a Wix website that I am creating. Ideally, I want to use this code on one page to display multiple before-and-after pictures. I have no experience in coding. Thank you.
Thank you for this! Just what I need and works great. I am wondering what the best way is to have it the full width of a page or content area? I tried playing with the CSS, but it does weird things to it. Thank you for any help!
it works file for mobiles and up to 860px of screen width. After that it starts acting weird. Image before remains glued to the left side of the screen while the image after remains at the center of the screen. Also, when the image before goes to the end of image-after, it starts growing and stretches all the way to the right side of the screen. It cannot act as expected as it is not limited by the container 800px because it is absolute now. How can this issue be solved?
What if we want to change some content based on the after before images like when its after the text will be different and when its before the other div will show?
Hi, thanks for the great walk-through! I new to learning code and my slider won't move, I've double and triple-checked everything and even ran your exact code from code pen and I'm still not getting a working slider. Am I missing something really obvious? do I need to import another script? Thanks
This is great. My only issue is that on mobile (where most of my site users will be interacting with it) scrolling interferes with it. As in, when I am scrolling to this section, it is also moving the slider on the image. Is there a way to disable the image slider during scrolling? of make it so that a tap on the image doesn't do anything, only a horizontal drag does?
Hey! Sure, you could disable moving it on scroll using JS. As to the horizontal drag, you'd likely have to write your own element for this as that's the default behavior for our slider.
Thanks so much for this tutorial! I followed along and also referenced the source code, but for some reason am not able to have the slider button drag. The before and after image input is registered (the images change and are draggable), but the icon I’m using remains centered and unmoving. Do you know why this might be?
I just have one question, I need to make the image size to be like the container size . When I add my images they was to big and I didn’t know what to do . Thanks for your time !
Thanks for the comment. I may need to see your code to be a help? Mind sharing it somehow? Feel free to email me and I'll get back if I have time. chris@codinginpublic.dev
Love the tutorial but I have one issue when I've added the code into my Divi page. The foreground image zooms in and out when I move the slider handle, any ideas what code I could fix/add?
Can I please ask that you try to start your projects with empty files. The is the reason behind the most successful coding channels like Traversy Media, NetNinja and even Wes Bos courses. It puts people off when you already have multiple files open and distracts from the tutorial. This tutorial was perfect because a person can follow along from the start.
Thanks for the suggestion! I totally agree that starting from the beginning is usually best. I think this _might_ be the only one I've ever started with three blank files. I'm not totally sure why I did. I'd say 95% or so of my videos start with an empty directory, but I'll keep that in mind going forward. Thanks again!
great job brother. but may i ask something, i want put 2 or more this image comparison on one page but it doesnt work, only the first one work, can u help me how to make more than one image comparison on one page? thank GBU
Sure thing. Glad it was a help. You'd need to change the JS to loop over a series of sliders instead of the single one. You can do this with querySelectorAll and then select the class in question. Hard to explain in a comment, but hopefully that helps point you in the right direction. Like this: codepen.io/Coding-in-Public/pen/RwyxzGQ
Great video, I do have a question though. I'm building a business website that requires me to show before and after pics of jobs I've done, I've added four sliders to my page but I'm only able to use the slider on the first image, the other three can't be moved from left to right. I've tried adding a class to each individual slider and updated the JScript but nothing seems to work. Any help on this would be much appreciated.
I'll whip up an example here later today if I get a chance. You'd just need to change up the query selector for the container to be a querySelectorAll.
Glad you enjoyed it! My usual theme is here: th-cam.com/video/5uETTXxVj8s/w-d-xo.html but I was using something else here. I’ll track it down and comment here. And I use the Bearded Icons.
This is so fantastic. Exactly what I am looking to do. My only challenge is that I would love to have the images go full screen, both height and width. Would this be an easy fix?
So glad it was a help! You should able to change the .image-container declaration to width: 100vw and height: 100vh; remove the aspect ratio. You may also need to throw an object-fit: cover on the image?
@@CodinginPublic Thank you so much for your response, your willingness to share your knowledge is amazing!, Thank you, it's almost there... the before image is scaling. I have the initial sider value of 100 instead of 50 because I want the user to pull the slider from the right. When I slide it the before image scales the image to the width of the position of the slider, instead of sticking to how it looks when first loaded.
Setting the image container height to 100% instead of vh seemed to correct the scaling issue, but now I have an ugly scroll bar., and overflow: hidden doesn't get rid of it. The journey continues.
@@CodinginPublic Thank you for your reply. The 100% height did the trick, and adding overflow to the CSS removed the unwanted scroll bar. Thank you so much for a fantastic tutorial and follow up with my questions.
hey bro ı made perfectly but there is only one problem . the before image having a sharpness i dont know why . my images same resulotion but on the left image having an sharpness or kinda filter . how can i solve it, please help??
Hey I tried adding this code to my website with an but the Iframe doesnt load on iphones or on safari do you know a fix for this I would really apreciate a response
@@CodinginPublic I use webflow its kinda hard to add it directly but I think apple is blocking 2nd hand website cookies thats why its not working but havent found a solution yet
Hi bro ! It was a very interested video and the code works very well. Except that, my before image doesn't act like it should do. My before image's container is actually the space between the left border of the whole container and the slider's vertical bar. So each time I'm sliding, my before image's width is changing, making an unexpected zoom effect. Do you know how to fix it please ?
Thank you so much for the video-Do you have any videos explaining how to turn this all into HTML? I am a complete beginner to code and for my website it will only let me put in the HTML part. I found websites that explain it but I don't understand what any of it means ':)
Hi I can't believe it but I figured it out! First copy everything in case you mess up. Go to the bottom of the HTML column, put paste all the CSS stuff For the Java, go back to the HTML Column, paste the Java column Then delete everything in the CSS and Java columns and it should still be exactly the same!
So close but so far. I can get as far as having the images over lap and add the slider. But I cant move it. Its just like a static image I assume that the javascirpt isnt working, but I have no idea why.
@@CodinginPublic I had the same issue and then I realized that I referenced the js file in the header of the html file instead of just above the closing tag
Glad you enjoyed it! Hmm…not sure? If you have access to the code, I think you could mostly drop this into your liquid template file? But I wonder if Shopify doesn't already have an app that does this?
This is so great, I've searched through so many different variations and this is by far the most accessible image comparison on the web
Dang you made that look so easy. Nicely explained and great to see the consideration for accessibility
Thanks for the kind words! Glad it was a help!
Absolutely amazing! It's a very creative and smart idea to use an input with the range type here. It was very interesting and informative, thank you, Chris!
So glad you enjoyed it! Thanks for saying something!
this is such a good solution, i attempted to build this on my own before deciding to see how other's are doing it. this is so insightful how much little JavaScript you need to get things done. thanks for doing this, God bless you 🙏🏽
You did it, once again... Just can't stop with the amazement!
Jaw-dropping good!
🎶 can’t stop won’t stop 🎶
Saw this video on the same topic several months ago:
th-cam.com/video/AZVAAydWTj4/w-d-xo.html
After watching Chris's video, it's obvious Chris's solution is 10x better. Again, great video. You nailed this one! 👏
Hey, thanks so much! I looked quickly and everything looked way over engineered, so I just came up with my own. Haha I’m sure there are ways to make it even better!
Thank you for this, fantastic! I was doing it quickly, and it wouldn't work, then, of course, in js I found that I used normal single quote marks instead of the back ones. I works like magic :)
Awesome!
You made it look so easy with minimum JavaScript!
It was a fun one to build!
I want more information on how to use this on a Wix website that I am creating. Ideally, I want to use this code on one page to display multiple before-and-after pictures. I have no experience in coding. Thank you.
thanks man the way you are explaining things is very simple and great !
You’re welcome! Thanks for the kind words!
This was a great breakdown! 🙂
Glad it was helpful!
Thank you for this! Just what I need and works great.
I am wondering what the best way is to have it the full width of a page or content area? I tried playing with the CSS, but it does weird things to it.
Thank you for any help!
it works file for mobiles and up to 860px of screen width. After that it starts acting weird. Image before remains glued to the left side of the screen while the image after remains at the center of the screen. Also, when the image before goes to the end of image-after, it starts growing and stretches all the way to the right side of the screen. It cannot act as expected as it is not limited by the container 800px because it is absolute now. How can this issue be solved?
Thank you SO much! I was able to customize this for my website perfectly.
Wonderful! Thanks for sharing!
This is very interesting! I have always wondered how such things were developed.
I needed one and wasn’t sure either, so this is what I came up with. 🤷♂️ ha
@@CodinginPublic Well done, very appreciated effort!
As always the best content ❤ thank you!
🙌
What if we want to change some content based on the after before images like when its after the text will be different and when its before the other div will show?
Yeah, I'd probably use a figure element with a figcaption and then just hide/show the before/after image the same way I show here. Hope that helps!
Can you create a vertical version. I’ve been trying but no luck
Congratz Chris for this nice content as over and over 🙏 totally crazy and genius 👌
🙌 thanks so much for your kind words. It was fun to put together!
Love the video, just wondering what editor you are using?
VSCode :)
Hi, thanks for the great walk-through! I new to learning code and my slider won't move, I've double and triple-checked everything and even ran your exact code from code pen and I'm still not getting a working slider. Am I missing something really obvious? do I need to import another script? Thanks
Scratch that, I found your answer among the comments, and moved the script to above the tag. Perfect, great solution!
This is great. My only issue is that on mobile (where most of my site users will be interacting with it) scrolling interferes with it. As in, when I am scrolling to this section, it is also moving the slider on the image. Is there a way to disable the image slider during scrolling? of make it so that a tap on the image doesn't do anything, only a horizontal drag does?
Hey! Sure, you could disable moving it on scroll using JS. As to the horizontal drag, you'd likely have to write your own element for this as that's the default behavior for our slider.
Thanks so much for this tutorial! I followed along and also referenced the source code, but for some reason am not able to have the slider button drag. The before and after image input is registered (the images change and are draggable), but the icon I’m using remains centered and unmoving. Do you know why this might be?
Hmm, I don't. I'm sorry! Could you run your CSS through a diff checker and compare it to mine? That would show you where it's different.
I just have one question, I need to make the image size to be like the container size . When I add my images they was to big and I didn’t know what to do . Thanks for your time !
Thanks for the comment. I may need to see your code to be a help? Mind sharing it somehow? Feel free to email me and I'll get back if I have time. chris@codinginpublic.dev
Thank you!! Is it possible to add a code to track your mouse movement on hover?
You could add that with JavaScript, but you'd still want the touch option for accessibility and mobile.
I learned so much in this video! thxs
You’re welcome! Glad it was such a help!
Love the tutorial but I have one issue when I've added the code into my Divi page. The foreground image zooms in and out when I move the slider handle, any ideas what code I could fix/add?
Hmm…I don't know? Could it be my generic classes are clashing with something you're already using?
Can I please ask that you try to start your projects with empty files. The is the reason behind the most successful coding channels like Traversy Media, NetNinja and even Wes Bos courses. It puts people off when you already have multiple files open and distracts from the tutorial. This tutorial was perfect because a person can follow along from the start.
Thanks for the suggestion! I totally agree that starting from the beginning is usually best. I think this _might_ be the only one I've ever started with three blank files. I'm not totally sure why I did. I'd say 95% or so of my videos start with an empty directory, but I'll keep that in mind going forward. Thanks again!
great job brother. but may i ask something, i want put 2 or more this image comparison on one page but it doesnt work, only the first one work, can u help me how to make more than one image comparison on one page? thank GBU
Sure thing. Glad it was a help. You'd need to change the JS to loop over a series of sliders instead of the single one. You can do this with querySelectorAll and then select the class in question. Hard to explain in a comment, but hopefully that helps point you in the right direction. Like this: codepen.io/Coding-in-Public/pen/RwyxzGQ
Great video, I do have a question though. I'm building a business website that requires me to show before and after pics of jobs I've done, I've added four sliders to my page but I'm only able to use the slider on the first image, the other three can't be moved from left to right. I've tried adding a class to each individual slider and updated the JScript but nothing seems to work. Any help on this would be much appreciated.
I believe someone else asked about this! Here you go! codepen.io/Coding-in-Public/pen/RwyxzGQ
mate, you are a legend, thanks for the speedy replay. Ill let you know how I get on ;)
@@CodinginPublic
Absolutely brilliant mate, 9 sliders added ;) had to delete the greyscale and a few other bits but it's all sorted. Thanks again brother.
Thanks man, u really helpful
Glad it was a help!
What if you have multple image sliders? The code doesn't work if there are more than one sliders. :(
I'll whip up an example here later today if I get a chance. You'd just need to change up the query selector for the container to be a querySelectorAll.
@@CodinginPublic thank you! Look forward to the solution!
@@muhammadukasha9635 codepen.io/Coding-in-Public/pen/vYjpqXp
@@CodinginPublic thank you so much!
For multple image sliders its a lot of HTML code. Can we make fx. "ul > li" for images and conect this with JS ? There will be less HTML lines :)
Thanks a lot for code!
You're welcome!
Great content! btw what theme do you use? and The Icon Pack
Glad you enjoyed it!
My usual theme is here:
th-cam.com/video/5uETTXxVj8s/w-d-xo.html but I was using something else here. I’ll track it down and comment here.
And I use the Bearded Icons.
The theme I was using here is called "Palenight Operator." Hope that helps!
Thank you very much 🔥
This is so fantastic. Exactly what I am looking to do. My only challenge is that I would love to have the images go full screen, both height and width. Would this be an easy fix?
So glad it was a help! You should able to change the .image-container declaration to width: 100vw and height: 100vh; remove the aspect ratio. You may also need to throw an object-fit: cover on the image?
@@CodinginPublic Thank you so much for your response, your willingness to share your knowledge is amazing!, Thank you, it's almost there... the before image is scaling. I have the initial sider value of 100 instead of 50 because I want the user to pull the slider from the right. When I slide it the before image scales the image to the width of the position of the slider, instead of sticking to how it looks when first loaded.
Setting the image container height to 100% instead of vh seemed to correct the scaling issue, but now I have an ugly scroll bar., and overflow: hidden doesn't get rid of it. The journey continues.
@@noelwiggins3583 Almost there! Feel free to send me your code and if I have time I can take a look.
@@CodinginPublic Thank you for your reply. The 100% height did the trick, and adding overflow to the CSS removed the unwanted scroll bar. Thank you so much for a fantastic tutorial and follow up with my questions.
what program are you using to write that code?
And how do you get the program to just create divs and space everything out for clear reading?
Hi, this is a great video! Thanks a lot :) Would you be able to code it on REACT?
Sure-just use an onChange handler on the range slider!
Thank you immensely!
Glad it helped!
hey bro ı made perfectly but there is only one problem . the before image having a sharpness i dont know why . my images same resulotion but on the left image having an sharpness or kinda filter . how can i solve it, please help??
Hmm…I'm not sure? I'd have to see some code or something. Anything in the CSS tell you why this is happening?
same thing happens for me, did you find any solution
How can i add before / after text. Can you help me please?
You could use an absolutely positioned span or something and set it relative to its parent div where the image is placed.
Hey I tried adding this code to my website with an but the Iframe doesnt load on iphones or on safari do you know a fix for this I would really apreciate a response
Hmm…I haven't used s in a quite a while. I'm guessing it's blocked by your site? Is there a way to add the code directly to your site?
@@CodinginPublic I use webflow its kinda hard to add it directly but I think apple is blocking 2nd hand website cookies thats why its not working but havent found a solution yet
Ah, that would make sense. Apple has really clamped down on security in Safari.
Hi bro ! It was a very interested video and the code works very well. Except that, my before image doesn't act like it should do. My before image's container is actually the space between the left border of the whole container and the slider's vertical bar. So each time I'm sliding, my before image's width is changing, making an unexpected zoom effect. Do you know how to fix it please ?
I'm having the same issue.
Edit: I put a max-width on the .container, and that seemed to fix it
Sounds like TheSalvera below found an answer? It's not happening for me and I'd have to see your code to make a suggestion, but hope that helps!
same thing happens for me, did you find any solution
How Can I import images option instead of adding images every time?
What framework are you using?
Thank you so much for the video-Do you have any videos explaining how to turn this all into HTML? I am a complete beginner to code and for my website it will only let me put in the HTML part. I found websites that explain it but I don't understand what any of it means ':)
Hi I can't believe it but I figured it out! First copy everything in case you mess up. Go to the bottom of the HTML column, put paste all the CSS stuff For the Java, go back to the HTML Column, paste the Java column Then delete everything in the CSS and Java columns and it should still be exactly the same!
That’s it! Awesome job!!!
That’s exactly what I would have told you to do!!!
@@CodinginPublic Thank you so much!!
So close but so far. I can get as far as having the images over lap and add the slider. But I cant move it. Its just like a static image I assume that the javascirpt isnt working, but I have no idea why.
Hmm…that's odd. Yes, I'd assume that's a JS issue. Are you getting any messages in the console?
@@CodinginPublic I had the same issue and then I realized that I referenced the js file in the header of the html file instead of just above the closing tag
Ah, sounds like your JS is not picking up your HTML. Move the script to just above the closing body tag. Let me know if that works.
Another fix here is to use the defer attribute or to set it as a type of module.
Oh wow, this video is amazing! How can I use it in my Shopify Shop? Any ideas? Thank´s a lot
Glad you enjoyed it! Hmm…not sure? If you have access to the code, I think you could mostly drop this into your liquid template file? But I wonder if Shopify doesn't already have an app that does this?
@@CodinginPublic yes, there are apps but every app makes the store more slowly that‘s why. So I‘ll try this out. Thank you 🙏🏼
will this work with a squarespace website?
I mean, it should? If you insert it in their html block? But I’m assuming they have a way to do something like this?
You are the man!
Glad it was a help!
how can we do vertical ?
you'd just need to switch up the properties the css variable points to-so top and height instead of left and width. Does that make sense?
You are awesome
Lovely content
🙏 glad it was a help! Thanks for saying something!
Can someone help me work this out on angular, please? 🙏
Wish I could! But I don’t know angular!
could this be done with videos?
Perhaps? You could have two auto-looping mp4s, I think.
Lovely!
Thank you so much 😍😍
You’re welcome!
see code below for working with multiple sliders
````
const els = document.querySelectorAll(".container")
els.forEach(el => {
for (let i = 0; i < el.childNodes.length; i++) {
if (el.childNodes[i].className === "slider") {
let j = el.childNodes[i];
j.addEventListener('input', (e) => {
el.style.setProperty('--position', `${e.target.value}%`);
})
}
}
})
const container = document.querySelector('.container');
document.querySelector('.slider')
````
Hey OP! Can you change the codepen with this code? thank you for good ideas
Thank you so much just ran into a problem with this!
amazing, thanks
Glad it was a help!
Very helpful
Great! Thanks for saying something!
Perfect thank you
you’re welcome!
Great video and follow up, nice oeral, but man the font you use, that is soooo bad :)
Ha! Glad you liked the video. It's been long enough I may be using a different font, but now I'm afraid to check 🫣
be regular .