Img Comparison Slider using Vanilla JS

Img Comparison Slider using Vanilla JS
Code Snippet:Image preview slider
Author: IvanDF
Published: January 14, 2024
Last Updated: January 22, 2024
Downloads: 782
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X