Compare Two Layered Images With A Slider – Scrub Slider

Scrub Slider is a pure JavaScript library that creates an interactive, configurable, responsive, vertical slider to compare two images (after/before) layered on top of each other.

How to use it:

Include the minified version of the Scrub Slider on the webpage.

<link href="dist/Scrub.min.css" rel="stylesheet">
<script src="dist/Scrub.min.js"></script>

Create two DIV element to hold the before/after images and then insert them to the Scrub Slider container as these:

<div class="example" id="demo">
  <div style="before-class"></div>
  <div style="after-class"></div>
</div>

Create a new Scrub object and specify the path to the before/after images.

Scrub({
  target: '#element',
  src: ['before.jpg','after.jpg']
});

Add custom alternative text to the before/after images.

Scrub({
  target: '#element',
  src: ['before.jpg','after.jpg'],
  alt: ['Image 1','Image 2']
});

Decide whether to show/hide the circular handle.

Scrub({
  target: '#element',
  handle: false, // default true
  src: ['before.jpg','after.jpg']
});

Set the height of the image comparison slider.

Scrub({
  target: '#element',
  height: 300,
  src: ['before.jpg','after.jpg']
});