How to Create an Image Comparison Slider using HTML, CSS, and JavaScript

Alizeh Codes September 15, 2025
Image Comparison Slider using HTML, CSS & JavaScript

Want to showcase before and after images on your website or portfolio? An image comparison slider is the perfect way to do it! In this tutorial, you’ll learn how to create a fully functional image comparison slider using HTML, CSS, and JavaScript — no external libraries or frameworks needed.


What is an Image Comparison Slider?

An image comparison slider lets users drag a handle to compare two images — commonly used for “before/after” visuals in photography, design, product showcases, and more.


Watch the Video Tutorial

Prefer to follow along with a video? Watch the full step-by-step tutorial on YouTube:




Tools & Technologies Used:

  • HTML5
  • CSS3
  • Vanilla JavaScript

1: HTML

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Image Comparison Slider</title> 
  <link rel="stylesheet"href="style.css"> 
  </head> 
  <body> 
  <div class="image-wrapper"> 
  <div class="image-container"> 
  <div class="image-before"></div> 
  <div class="image-after"></div> 
  </div> 
  <div class="comparison-slider">
<div class="drag-line"> 
<span></span> 
</div> 
<input type="range" min="0" max="100" value="50"> </div> 
</div> 
<script src="script.js"></script> 
</body> 
</html>

2: CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  display: grid;
  height: 100%;
  place-items: center;
  background-color: #264653;
}
.image-wrapper {
  position: relative;
  height: 500px;
  width: 750px;
  overflow: hidden;
  background: #fff;
  border: 7px solid #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
}
.image-wrapper .image-container {
  height: 100%;
  width: 100%;
  display: flex;
}
.image-wrapper .image-container .image-before {
  height: 100%;
  width: 100%;
  background: url("images/img-1.jpg") no-repeat;
}
.image-wrapper .image-container .image-after {
  position: absolute;
  height: 100%;
  width: 50%;
  background: url("images/img-1.jpg") no-repeat;
}
.image-wrapper .comparison-slider {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
}
.image-wrapper .comparison-slider input {
  width: 100%;
  outline: none;
  background: none;
  -webkit-appearance: none;
}
.comparison-slider input::-webkit-slider-thumb {
  height: 486px;
  width: 3px;
  background: none;
  -webkit-appearance: none;
  cursor: col-resize;
}
.comparison-slider .drag-line {
  width: 3px;
  height: 486px;
  position: absolute;
  left: 49.85%;
  pointer-events: none;
}
.comparison-slider .drag-line::before,
.comparison-slider .drag-line::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 222px;
  background: #fff;
}
.comparison-slider .drag-line::before {
  top: 0;
}
.comparison-slider .drag-line::after {
  bottom: 0;
}
.comparison-slider .drag-line span {
  height: 42px;
  width: 42px;
  border: 3px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.comparison-slider .drag-line span::before,
.comparison-slider .drag-line span::after {
  position: absolute;
  content: "";
  top: 50%;
  border: 10px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.comparison-slider .drag-line span::before {
  left: 40%;
  border-left-color: #fff;
}
.comparison-slider .drag-line span::after {
  left: 60%;
  border-top-color: #fff;
}

3: JavaScript

const comparisonSlider = document.querySelector(
  ".comparison-slider input"
);
const afterImage = document.querySelector(
  ".image-container .image-after"
);
const dragLine = document.querySelector
  (".comparison-slider .drag-line");
comparisonSlider.oninput = () => {
  let sliderValue = comparisonSlider.value;
  dragLine.style.left = sliderValue + "%";
  afterImage.style.width = sliderValue + "%";
};

Result:

After completing all three steps, you’ll have a responsive and interactive image comparison slider that looks great on desktop and mobile devices.


Where You Can Use This

  • Before/After photo effects
  • Beauty, makeup, or fitness transformations
  • Photo editing and retouch portfolios
  • Product comparisons or feature highlights

Final Words

Using only HTML, CSS, and JavaScript, you've created a sleek and professional image comparison slider. You can customize it further with animations, touch support, or modern UI elements. If you found this helpful, leave a comment and share this tutorial with other developers. Happy coding! 🚀


Tags:

image comparison slider, HTML CSS JavaScript project, before after slider, photo comparison, JavaScript UI project, responsive slider, HTML CSS JS tutorials

Tags:

Post a Comment

0 Comments