Vue Compare Image

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

NOTE: React Version is also available!

Demo

DEMO

Features

• 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

How to use

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>

Props

Prop (* required)	type	default	description
handleSize	number (px)	40	diameter of slider handle (by pixel)
hover	boolean	false	Whether to slide at hover
leftImage *	string	null	left image's url
leftImageAlt	string	null	left image's alt
leftLabel	string	null	Left image text label
rightImage *	string	null	right image's url
rightImageAlt	string	null	right image's alt
rightLabel	string	null	Right image text label
sliderLineWidth	number (px)	2	line width of slider (by pixel)
sliderPositionPercentage	number (float)	0.5	Starting line position (from 0 to 1)

Dependencies

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

Contributors

Shota Tamura 💻

Lukáš Irsák 💻