Skip to main content

​
Overview

Compare is a component that allows users to slide and compare two pieces of content side-by-side. Works with images, designs, code, or any custom elements.

​
Usage

<template>
  <Compare
    firstImage="/image1.jpg"
    secondImage="/image2.jpg"
    slideMode="hover"
    :showHandlebar="true"
  />
</template>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
firstImagestring""URL of the first image
secondImagestring""URL of the second image
firstImageAltstring"First image"Alt text for first image
secondImageAltstring"Second image"Alt text for second image
classstring""Additional classes for the component
firstContentClassstring""Classes applied to first content wrapper
secondContentClassstring""Classes applied to second content wrapper
initialSliderPercentagenumber50Initial position of slider (0-100)
slideMode"hover" | "drag""hover"Interaction mode for the slider
showHandlebarbooleantrueShow/hide the handle bar
autoplaybooleanfalseEnable/disable autoplay
autoplayDurationnumber5000Duration of autoplay cycle in ms

​
Events

Event NamePayloadDescription
update:percentagenumberEmitted when slider position changes (0-100)
drag:start-Emitted when dragging starts
drag:end-Emitted when dragging ends
hover:enter-Emitted when mouse enters component
hover:leave-Emitted when mouse leaves component

​
Slots

Slot NameDefault ContentDescription
first-content<img> element if firstImage prop is providedContent shown on the left/first side of the comparison. Has full access to component width/height.
second-content<img> element if secondImage prop is providedContent shown on the right/second side of the comparison. Has full access to component width/height.
handleDefault slider handle with dots iconCustom handle for the slider. Automatically positioned at the dividing line. Should handle positioning with absolute positioning.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us