Img Comparison Slider using Vanilla JS

This code creates an img comparison slider using Vanilla JS. It allows you to interactively compare two images by adjusting a slider. The major functionality involves dynamically changing the width of the foreground image based on the slider’s position, providing a seamless image comparison experience. This code helps you visualize and compare images effectively.

You can use this Image Comparison Slider in various web/app projects where you want to visually compare two images interactively. Furthermore, you can customize the slider with additional CSS according to your needs.

How to Create Img Comparison Slider Using Vanilla Js

1. First of all, load the Font Awesome CSS by adding the following CDN link to the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'>

2. After that, create the HTML structure for your image comparison slider. You’ll need a container for the slider, two images (upper and lower), a range input for the slider, and left/right control buttons.

<!-- Image Slider Container -->
<div class="image-slider-container">
	<!-- Upper Image -->
	<div class="image background-image"></div>
	<!-- Lower Image -->
	<div class="image foreground-image"></div>

	<!-- Range Input -->
	<input id="range-slider" class="range-slider" name="slider" type="range" min="1" max="100" value="50" />

	<!-- Slider Control -->
	<div class="slider-control">
		<span class="slider-control-btn left"></span>
		<span class="slider-control-btn right"></span>
	</div>
</div>

3. Apply the necessary CSS styles to create the visual elements and layout of the slider. You can customize the appearance as per your preferences.

@charset "UTF-8";
*::before,
*,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #333;
  perspective: 200px;
  box-shadow: inset 0 0 200px;
  animation: focusToSlider 500ms ease-out reverse;
}

.image-slider-container {
  position: relative;
  width: 800px;
  height: 500px;
  border: 5px solid #fff;
  border-radius: 20px;
  overflow: hidden;
  transform: scale(1) rotate(0);
  transition: transform 300ms ease;
  transform-style: preserve-3d;
}
.image-slider-container .image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.image-slider-container .image:nth-child(1) {
  background: url("https://cdn.pixabay.com/photo/2014/04/17/23/26/environmental-protection-326923_1280.jpg");
  filter: grayscale(100%) blur(2.5px);
}
.image-slider-container .image:nth-child(2) {
  background: url("https://cdn.pixabay.com/photo/2014/04/17/23/26/environmental-protection-326923_1280.jpg");
  filter: saturate(1.3);
  width: 50%;
}
.image-slider-container .range-slider {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  background: rgba(242, 242, 242, 0.2);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
  transition: all 200ms linear;
}
.image-slider-container .range-slider:hover {
  background: rgba(242, 242, 242, 0.1);
}
.image-slider-container .range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 800px;
  background: white;
  cursor: move;
  transition: all 300ms ease;
}

.slider-control {
  z-index: 0;
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  cursor: grab;
}
.slider-control::after, .slider-control::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.slider-control::after {
  content: "";
  right: 3px;
}
.slider-control::before {
  content: "";
  left: 3px;
}

@keyframes focusToSlider {
  from {
    box-shadow: inset 0 0 200px;
  }
  to {
    box-shadow: inset 0 0 0 0;
  }
}

4. Finally, add the following JavaScript code to make the slider functional. The code below adjusts the width of the foreground image and handles mouse movements for a smooth interaction.

// set vars
const imageSliderContainer = document.querySelector(".image-slider-container");
const slider = document.getElementById("range-slider");
const image = document.getElementsByClassName("image")[1];
const buttonRange = document.getElementsByClassName("slider-control")[0];

// Move slider and buttonRange at change of value
slider.addEventListener("input", (e) => {
	const sliderPos = e.target.value;

	image.style.width = sliderPos + "%";
	buttonRange.style.left = sliderPos + "%";
});

imageSliderContainer.addEventListener("mousemove", (e) => {
	const reduceMovement = (n) => n / 25;

	imageSliderContainer.animate(
		{
			transform: `scale(1.03) rotateX(${reduceMovement(
				e.movementY
			)}deg) rotateY(${reduceMovement(e.movementX)}deg)`
		},
		{ duration: 1200 }
	);
});

imageSliderContainer.addEventListener("mouseout", (e) => {
	imageSliderContainer.animate(
		{ transform: `scale(1) rotateX(0deg) rotateY(0deg)` },
		{ duration: 250, fill: "forwards" }
	);
});

That’s all! hopefully, you have successfully created an Img Comparison Slider. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.