vue <template> <div class="image-compare"> <div class="bottom-image" :style="{ backgroundImage: 'url(' + bottomImg + ')' }"> <div class="top-image" :style="{ backgroundImage: 'url(' + topImg + ')', width: sliderWidth + '%' }"> <!--...
leftImage *stringnullleft image's url rightImage *stringnullright image's url verticalbooleanfalseCompare images vertically or horizontally keyboardbooleantrueAllow Keyboard navigation for accessibility keyboardStepnumber0.01By what percentage should the slider move on keyboard press. between0and1 ...
Vue Compare Image <VueCompareImage leftImage="/cat1.jpg" rightImage="/cat2.jpg" /> <VueCompareImage leftImage="/cat1.jpg" rightImage="/cat2.jpg" :sliderPositionPercentage="0.2" leftLabel="Forest 1" rightLabel="Forest 2" /> Forest 1 Forest 2 <VueCompareImage leftImage="/cat...
Image comparison slider. Compare images before and after. Supports React, Vue, Angular. - sneas/img-comparison-slider
leftImage * string null left image's url rightImage * string null right image's url vertical boolean false Compare images vertically or horizontally keyboard boolean true Allow Keyboard navigation for accessibility keyboardStep number 0.01 By what percentage should the slider move on keyboard press. ...
Compare two images via slider using vue.js - Now with ability to choose slider start position. Latest version: 0.1.2, last published: 8 years ago. Start using vue-image-compare-plus in your project by running `npm i vue-image-compare-plus`. There are no
1 2 Data Entry AutoComplete Cascader Checkbox DatePicker Form Input InputNumber Mentions Radio Rate Select Slider Switch TimePicker Transfer TreeSelect Upload Data Display Avatar Badge Calendar Card Carousel Collapse Comment Descriptions Empty Image
Steps Data Entry AutoComplete Cascader Checkbox DatePicker Form Input InputNumber Mentions Radio Rate Select Slider Switch TimePicker Transfer TreeSelect Upload Data Display Avatar Badge Calendar Card Carousel Collapse Comment Descriptions Empty Image
Slider Toggle Switch Button Rating OTP Input Speech To TextPREVIEW NAVIGATION Accordion AppBar Breadcrumb Carousel Context Menu Menu Bar Sidebar Tabs Toolbar Tree View File Manager Ribbon Stepper LAYOUT Avatar Card Dialog ListView Tooltip Splitter ...
importVueCompareImagefrom'vue-compare-image';exportdefault{name:'app',components:{VueCompareImage},}; <template> <VueCompareImageleftImage="image1.jpg"rightImage="image2.jpg"/>; </template> Prop (* required)typedefaultdescription handleSizenumber (px)40diameter of slider handle (by pixel) ...