How to Make a Image Comparison Slider using JavaScript

In this blog post, we’ll explore how to create an Image Comparison Slider using HTML, CSS, and JavaScript. This interactive slider allows users to compare two images by adjusting a draggable line horizontally.

HTML Structure:

The HTML structure defines the layout of the Image Comparison Slider. Here’s a breakdown:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Image Comparison Slider</title>
  </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>
  </body>
</html>

HTML

Document Type Declaration and Head Section:
- Specifies the document type and includes metadata such as character set and title.
- Links to an external stylesheet for styling.
Body Section:
- Contains a .image-wrapper div that wraps the slider and images.
- Inside the wrapper, there’s a .image-container div that holds two images: one before and one after comparison.
- Additionally, there’s a .comparison-slider div containing a draggable line and an input range element.

CSS Styling:

The CSS styling is responsible for the visual appearance of the Image Comparison Slider. Key styles include:

* {
  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("img.jpg") no-repeat;
}
.image-wrapper .image-container .image-after {
  position: absolute;
  height: 100%;
  width: 50%;
  background: url("img.png") 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;
}

CSS

Global Styles:
- Resets default browser styles and sets the background color.
Image Wrapper and Container Styles:
- Defines dimensions, border, and background for the image wrapper and container.
- Positions the before and after images side by side within the container.
Comparison Slider Styles:
- Positions the slider relative to the wrapper and styles the draggable line and thumb.
- Sets styles for the drag line’s appearance and animation.

JavaScript Functionality:

The JavaScript code adds interactivity to the Image Comparison Slider. Key functionalities include:

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 + "%";
};

JavaScript

Slider Interaction:
- Listens for changes in the input range value and adjusts the position and width of the draggable line and after image accordingly.
- The after image width changes dynamically based on the slider value, allowing users to compare the two images effectively.

Conclusion:

In this blog post, we’ve explored the creation of an Image Comparison Slider using HTML, CSS, and JavaScript. By understanding the structure, styling, and functionality of each component, you can customize and enhance the slider to meet your specific requirements. Whether you’re comparing before and after images for design projects or showcasing visual differences, this slider provides a user-friendly and interactive solution.

Happy Coding!

How to Make a Image Comparison Slider using JavaScript

HTML Structure:

CSS Styling:

JavaScript Functionality:

Conclusion:

2 Comments

Leave a Reply Cancel reply