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

Category: Image , Javascript | December 5, 2018
Author: piecioshka
Views Total: 47
Official Page: Go to website
Last Update: December 5, 2018
License: MIT

Preview:

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

Description:

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>

You Might Be Interested In:

Leave a Reply