Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
babel.config.js
package.json
vue.config.js
yarn.lock

README.md

Vue Compare Image

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

img

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
leftImage * string null left image's url
rightImage * string null right image's url
sliderLineWidth number (px) 2 line width of slider (by pixel)
handleSize number (px) 40 diameter of slider handle (by pixel)
hover boolean false Whether to slide at hover
sliderPositionPercentage number (float) 0.5 Starting line position (from 0 to 1)

Dependencies

You can’t perform that action at this time.