Simple Responsive Image Comparison Component - vue-compare-image

Install & Download:

# Yarn
$ yarn add vue-compare-image
# NPM
$ npm install vue-compare-image --save

Description:

compare-image is a simple, responsive, mobile-friendly image comparison component to compare two images for differences.

How to use it:

1. Install and import the component.

import VueCompareImage from 'vue-compare-image';

2. Add before/after images to the component.

<template>
  <VueCompareImage leftImage="before.jpg" rightImage="after.jpg" />;
</template>

3. Initialize the component.

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

4. Config the component with the following props.

leftImage: {
  type: String,
  default: '',
},
leftImageAlt: {
  type: String,
  default: null,
},
leftLabel: {
  type: String,
  default: '',
},
rightImage: {
  type: String,
  default: '',
},
rightImageAlt: {
  type: String,
  default: null,
},
rightLabel: {
  type: String,
  default: '',
},
hover: {
  type: Boolean,
  default: false,
},
handleSize: {
  type: Number,
  default: 40,
},
sliderLineWidth: {
  type: Number,
  default: 2,
},
sliderPositionPercentage: {
  type: Number,
  default: 0.5,
}