Before/After Comparison Slider In Pure JavaScript

Preview:

Description:

A minimal before/after image comparison slider written in modern JavaScript.

How to use it:

1. Load the stylesheet slider.css and JavaScript slider.js in the document.

<link rel="stylesheet" href="./slider.css" />
<script src="./slider.js"></script>

2. Create an empty container for the image comparison slider.

<div id="slider" class="slider">
</div>

3. Initialize the slider and specify the path to before/after images.

const slider = new Slider('slider', {
      after: 'after.jpeg',
      before: 'before.jpeg'
});