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
$ 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>
  <div class="slider-after-image">
    <img src="after.jpg" alt=""/>
  </div>
  <input type="range" class="slider-track"/>
</div>