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