Slider Component For Comparing Images


A responsive, accessible, touch-enabled Vue slider component for comparing before & after images on your app.

How to use it:

1. Import and register the image comparison slider.

import Vue from 'vue';
import App from './App.vue';
import {
} from 'img-comparison-slider/loader';
Vue.config.productionTip = false;
// Tell Vue to ignore all components defined in the test-components
// package. The regex assumes all components names are prefixed
// 'test'
Vue.config.ignoredElements = [/test-\w*/];
// Bind the custom elements to the window object
applyPolyfills().then(() => {
new Vue({
  render: (h) => h(App),

2. Add before/after images to the image comparison slider component.

  <img slot="before" width="100%" src="before.jpg">
  <img slot="after" width="100%" src="after.jpg">

3. Customize the slider styles as follows:

.slider-example {
  --handle-opacity: 0.5;
  --handle-opacity-active: 0.5;
  --handle-size: 60px;
  --divider-width: 4px;
  --divider-color: #ffa658;
  /* ... */ 


Slider Component For Comparing Images


v3.0.4 (05/02/2021)

  • properly handle out-of-the-component mouse movements

v3.0.3 (03/28/2021)

  • consider page horizontal scoll position when calculating slider offset

v3.0.2 (03/13/2021)

  • keep divider line within images

Download Details:

Author: sneas

Live Demo:

Download Link:

Official Website:

Install & Download:

You Might Be Interested In:

Add Comment