Mobile-friendly Image Comparison In Pure JS – before-after-slider

before-after-slider is a vanilla JavaScript library that generates a responsive, touch-enabled before/after slider to help your user compare 2 images for differences.

How to use it:

Install the package and import the before-after-slider module.

# NPM
$ npm install before-after-slider --save

import SliderBar from 'before-after-slider';

Or load the slider.bundle.js from a CDN.

<script src="https://cdn.jsdelivr.net/npm/before-after-slider@latest/dist/slider.bundle.js"></script>

The required HTML structure for the before/after slider.

<div id="slider-example"></div>

Initialize the before/after slider and define the before/after images to compare. Note that these two images must have the same size.

new SliderBar({
    el: "#slider-example",
    beforeImg: 'before.jpg',
    afterImg: 'after.jpg',
    width: "90%",
    height: "400px"
});

Determine whether to show the divider line. Default: true.

new SliderBar({
    el: "#slider-example",
    beforeImg: 'before.jpg',
    afterImg: 'after.jpg',
    width: "90%",
    height: "400px",
    line: true,
    lineColor: 'rgba(0, 0, 0, .5)'
});