This tutorial will guide you through the process of creating an Image Comparison Slider Using Vanilla JS. This interactive component allows users to visually compare two images by dragging a slider, revealing different states or versions of the same subject. This is useful for highlighting before-and-after effects, showcasing product variations, or simply providing an engaging way to explore visual differences.
Step 1: Include Header Assets
To start, you’ll need to include the necessary assets in the <head> section of your HTML document. This will ensure that you have the required styles for icons and basic styling.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'>
Step 2: Create the HTML Structure
Next, create the basic HTML structure for the image comparison slider. This includes the container, the two images to compare, the range input for controlling the slider, and the slider control element.
<!-- 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>
<script src="./script.js"></script>
Step 3: Add CSS Styles
Now, add the CSS styles to visually structure and style the image comparison slider. This will handle the layout, appearance, and responsiveness of the slider.
@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;
}
}
Step 4: Implement JavaScript Functionality
Finally, implement the JavaScript functionality to make the slider interactive. This involves handling user input from the range slider and updating the visibility of the foreground image accordingly.
// 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" }
);
});
Step 5: Include Footer Assets
Include any footer assets such as Javascripts.
That’s it! You have successfully created an image comparison slider using vanilla JavaScript. This slider allows users to visually compare two images by dragging a slider.
