Hello. This is simple component for VueJS can help you check diffrence between two images using slider. On this page you will get to know how install and use features this component.

DEMO & EXAMPLES

Repository on Github

License: MIT

1.0.5 - Fixed animate arrows

• Simple for using
• Responsive (expandes from the container width, set container's height using image properly aspect ratio)
• Flexible tuning
• Mobile frendly

Install npm package

$ npm install --save vue-compare-two-images-component

Register component globally

import CompareTwoImages from 'vue-compare-two-images-component';

// Register component as CompareTwoImages after

Vue.use(CompareTwoImages);

or import into your component directly.

import CompareTwoImages from 'vue-compare-two-images-component';

// Import CompareTwoImages component

export default {
	name: "YourComponentName",
	components: {
		CompareTwoImages: CompareTwoImages
		// Register imported component as CompareTwoImages
	}
}

After that use compare-two-images tag into template.

<template>
	<compare-two-images
		:leftImage="path/to/left.png"
		:rightImage="path/to/right.png">
	</compare-two-images>
</template>

For additional information see documentation