Create a step-by-step tutorial for comparing before and after images using HTML Range Input. Using CSS and JavaScript, JS part of the code is very little, mainly HTML, CSS, and implementation ideas.

introduce

If you have two images to compare, the “before and after” image slider is an effective and simple UI element.

The “Slider” element lets your user control how two images appear on the screen and freely navigate between two different images. You might think it would require some libraries to create this effect, but in reality, it’s a very straightforward and easy to code UI. With the basics of CSS and JS, anyone can create it.

In this tutorial, I’ll explain in detail the concepts behind this UI, how to implement it, and suggestions for further enhancements.

The results demonstrate

Step by step guide

Step 1. Understand the concept

The concept of “image Slider” is very simple, you only need two components, the image container and a slider.

The image container is just a normal div with two images of the same size on top of each other. One serves as “background” and the other as “foreground”.

We will use absolute positioning to place the foreground image directly on the background image. The width of the background image is always 100%, while the width of the foreground image changes according to user input, so that part of the background image appears.

The second component is “Slider”. To keep things simple, we can use HTML range to enter elements. It allows the user to select a value by dragging between the minimum and maximum you define. You can easily get input values using event listeners in javascript.

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
Copy the code

One disadvantage of using the default slider input is that the styles are limited. You can’t go too crazy with the design, and if you’re looking for a more customizable Slider, you’ll probably need to build it yourself. However, this is not the focus of this tutorial.

We will make the slider 100% container width and height and place it on top of the image container. As the user drags the slider, we update the foreground width at the same time, creating the illusion that the user is dragging the image.

Step 2. Create an image container

Start by creating a container, which is a simple structure with two divs inside. Since we don’t want the images to scale according to the width of the div that contains them, we’ll apply background-image instead of the tag to the image. One important style we need to use is the background-size property and make sure the image always stays the same size.

HTML:

<div class='container'>
  <div class='img background-img'></div>
  <div class='img foreground-img'></div>
</div>
Copy the code

CSS:

.container {
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid white;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 900px 100%;
}
.background-img {
  background-image: url('https://i.loli.net/2020/12/28/1dGpFx3zJ9Pjcme.jpg');
}
.foreground-img {
  background-image: url('https://i.loli.net/2020/12/28/xIZmjtBR5VWoqiz.jpg');
  width: 50%;
}
Copy the code

To make this tutorial easier, I’ve used a fixed size for everything. If you don’t want to use SCSS, simply set the styles to flat rather than nested

Now that we have the container, let’s add the slider.

Step 3 Create a slider

Our slider needs to cover the entire image and “divide” the front and back of the image with thin white bars. This can be done by setting the style of the slider and the slider (the part you drag). We need to make the default appearance of the slider and thumb invisible, and then apply our own styles to them.

HTML (below the image) :

<div class='container'>.<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
</div>
Copy the code
.container {
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid white;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 900px 100%;
}
.background-img {
  background-image: url('https://i.loli.net/2020/12/28/1dGpFx3zJ9Pjcme.jpg');
}
.foreground-img {
  background-image: url('https://i.loli.net/2020/12/28/xIZmjtBR5VWoqiz.jpg');
  width: 50%;
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: rgba(242.242.241.3);
  outline: none;
  margin: 0;
  transition: all .2s;
}
.slider:hover {
  background: rgba(242.242.241.1); 
}
.slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}

Copy the code

I applied a slightly visible gray background to the slider to make the color more transparent while hovering. Creates a “focus” effect when the user hovers the mouse over the image. For the slider, it’s just a white background div with the entire height of the container.

Now that we have a working slider, let’s associate it with the width of the foreground image.

Step 4. Add event listeners to the slider

The final step is to link the value on the slider to the width of the foreground image, which is easy to do (because we use the native HTML range Input as the slider). When applying event listeners, you can get values from 1 to 100 in event.target.value.

Then, we just need to select the foreground element and change its width when the slider updates.

JS:

const slider = document.getElementById("slider");
slider.addEventListener("input".function(e){
  document.querySelector(".foreground-img").style.width = e.target.value + "%"
})
Copy the code

If it doesn’t work as expected, try to see if you got the value of slider correctly, and then check the BACKground-size property of the CSS again

Cool! Function is normal. As an added benefit of using the range input, we can even click inside the container to move the slider to the clicked position.

Another thing we could (and probably should) add to the UI is a drag me circle icon on the slider to indicate that this is a draggable component.

Step 5 (Optional) Add a circle thumb to the slider

The native range input has its advantages (easy to implement, easy to value, etc.), but there’s not much we can do about style. Since we’ve replaced the default “circle” thumb with a white delimiter, we need to add the circle back somehow.

A quick (but impractical) way to do this is to add another element that is completely unrelated to the slider, but sits in the center of the slider and “follows” the slider as it moves through javascript. That’s exactly what we’re going to do.

HTML:

<div class='container'>.<div class='slider-button'></div>
</div>
Copy the code

CSS:

.slider-button {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-button::after {
  content: ' ';
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
.slider-button::before {
  content: ' ';
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}
Copy the code

After and before elements add two “arrows” inside the circle button

JS:

const slider = document.getElementById("slider");
let sliderPos
slider.addEventListener("input".function(e){
  sliderPos = e.target.value
  document.querySelector(".foreground-img").style.width = `${sliderPos}% `
  document.querySelector(".slider-button").style.left = `calc(${sliderPos}% - 18px)`
})
Copy the code

One more thing we need to do is make the circle non-selectable, so that the mouse event always turns to the slider. With some careful positioning and JS, we get the circle thumb and slider to move together.

With that done, our “before and after” image slider is complete, and you can now choose your favorite image and experiment.

The source code

Coding. Zhangbing. Site

conclusion

As mentioned earlier, the concept of this UI element is so simple that you don’t need to install another library to achieve this effect. Having said that, this is a very basic implementation, and as you can see, I use a lot of fixed pixel sizes. If you want a more “advanced” design, I recommend spending some time researching the design variations for different window sizes.

In this example, I use a comparison between a black and white image and a color image. However, I have seen many other examples with time-varying characteristics (such as the same city 100 years ago and now). For this type of design, the implementation is similar.

In addition, since we are using the background image property (regardless of the container size), you can also easily create static to dynamic sliders using animated GIFs.

If you enjoyed this tutorial or have other ideas, please leave a comment!

Original text: blog. Zhangbing. Site / 2021/01/04 /…