Before/After Image Slider Comparison (HTML, CSS, and JavaScript)

Today we’ll build a simple before/after image slider that’s accessible via the keyboard and provides an accessible readout when using assistive technology.

🔗 Key Links 🔗

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Introduction
0:30 HTML
4:03 CSS
12:56 JavaScript

---------------------------------------

🌐 Connect With Me 🌐

[countercoder]

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

[hllloworld]

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 🙏🏽

[RobertMcGovernTarasis]

Dang you made that look so easy. Nicely explained and great to see the consideration for accessibility

[MANIKDENIS]

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!

[MarshallSC]

You did it, once again... Just can't stop with the amazement!
Jaw-dropping good!

[vitaligolev]

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 :)

[AbberrahmaneElanizi]

You made it look so easy with minimum JavaScript!

[MMDZ_]

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.

[BEVILE]

thanks man the way you are explaining things is very simple and great !

[KOLYAKOSINSKYI]

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?

[LocalCreative]

Thank you SO much! I was able to customize this for my website perfectly.

[jimmyj.]

Congratz Chris for this nice content as over and over 🙏 totally crazy and genius 👌

[mohamadybr]

This is very interesting! I have always wondered how such things were developed.

[lvekua]

As always the best content ❤ thank you!

[JeremyFukunaga]

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!

[wajdy]

Can you create a vertical version. I’ve been trying but no luck

[adnan_niazi]

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?

[DanInTheMountains]

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

[yousefmiri]

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 !

[erinhudsondev]

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?