Simple Vue.js component to compare two images using slider.

NOTE: React Version is also available!

DEMO

• Simple
• Responsive (fit to the parent width)
• Size difference between two images handled correctly. Element size determined by following two factors:
  • width of the parent
  • right image's aspect ratio

In the shell:

yarn add vue-compare-image

// or

npm install --save vue-compare-image

In your component file:

import VueCompareImage from 'vue-compare-image';

export default {
  name: 'app',
  components: { VueCompareImage },
};

<template>
  <VueCompareImage leftImage="image1.jpg" rightImage="image2.jpg" />;
</template>

• css-element-queries to detect element resize event.

Shota Tamura 💻

Lukáš Irsák 💻

Ricardo Morin 💻