Minimal Mobile-compatible Image Comparison Slider – slider-before-after

Category: Image , Javascript | December 5, 2018
Views Total:2,088 views
Official Page:Go to website
Last Update:December 5, 2018


Minimal Mobile-compatible Image Comparison Slider – slider-before-after


An image comparison slider plugin/component which creates a vertical slider to reveal before & after images on mouse drag and touch swipe.

Basic on the range slider input.

How to use it:

Download & install.

$ npm install slider-before-after --save

Import the required JavaScript and CSS files into the document.

<link rel="stylesheet" href="/src/styles/main.css">
<link rel="stylesheet" href="/src/styles/custom-range-input.css">
<script src="/src/scripts/slider-before-after.js"></script>

Add a range slider to the before & after images. Done.

<div class="slider-before-after">
  <div class="slider-before-image">
    <img src="before.jpg" alt=""/>
  <div class="slider-after-image">
    <img src="after.jpg" alt=""/>
  <input type="range" class="slider-track"/>

You Might Be Interested In:

Leave a Reply