Components

Image Comparison

Interactive image comparison component with slider controls for before/after visualization.

Image Comparison

The ImageComparison component creates an interactive image comparison slider that allows users to compare two images side by side. It supports multiple comparison modes, keyboard navigation, and touch controls for a seamless user experience.

Usage

Drag to compare

<template>
  <MImageComparison class="h-64 w-96 rounded-lg overflow-hidden">
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="Before" 
      position="left" 
    />
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="After" 
      position="right" 
    />
    <MImageComparisonSlider>
      <div class="text-xs font-medium text-gray-900 bg-white px-2 py-1 rounded absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap">
        Drag to compare
      </div>
    </MImageComparisonSlider>
  </MImageComparison>
</template>

Props

MImageComparison Props

class

string

CSS classes to apply to the container.

enableHover

boolean

Enable hover-based interaction instead of drag.

springOptions

SpringOptions

Spring animation options for slider movement.

initialPosition

number

Initial slider position as a percentage (0-100).

mode

string

Comparison mode: 'slide', 'fade', 'curtain', or 'circle'.

orientation

string

Slider orientation: 'horizontal' or 'vertical'.

enableZoom

boolean

Enable zoom functionality.

showControls

boolean

Show reset controls.

showPosition

boolean

Show position indicator.

autoPlay

boolean

Enable automatic sliding.

autoPlayDuration

number

Duration between automatic slides in milliseconds.

snapToSteps

boolean

Snap slider to predefined steps.

steps

number[]

Steps to snap to when snapToSteps is enabled.

ariaLabel

string

ARIA label for accessibility.

leftImageLabel

string

ARIA label for the left image.

rightImageLabel

string

ARIA label for the right image.

MImageComparisonImage Props

src

string required

Source URL of the image.

alt

string required

Alternative text for the image.

position

string required

Position of the image: 'left' or 'right'.

class

string

CSS classes to apply to the image.

MImageComparisonSlider Props

class

string

CSS classes to apply to the slider.

Events

positionChange

function

Emitted when the slider position changes. Returns the new position as a percentage.

dragStart

function

Emitted when dragging starts.

dragEnd

function

Emitted when dragging ends.

Examples

Basic Image Comparison

Before & After Comparison

OriginalEnhanced

<template>
  <MImageComparison class="h-64 w-96 rounded-lg overflow-hidden">
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="Mountain before" 
      position="left" 
    />
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="Mountain after" 
      position="right" 
    />
    <MImageComparisonSlider />
  </MImageComparison>
</template>

Vertical Orientation

<template>
  <MImageComparison 
    class="h-96 w-64 rounded-lg overflow-hidden" 
    orientation="vertical"
  >
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="Ocean before" 
      position="left" 
    />
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="Ocean after" 
      position="right" 
    />
    <MImageComparisonSlider />
  </MImageComparison>
</template>

With Custom Position

<template>
  <MImageComparison 
    :initial-position="25" 
    class="h-64 w-96 rounded-lg overflow-hidden"
  >
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="City before" 
      position="left" 
    />
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1587614382346-4ec70e388b28?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="City after" 
      position="right" 
    />
    <MImageComparisonSlider />
  </MImageComparison>
</template>

With Position Indicator

50%

<template>
  <MImageComparison 
    show-position
    class="h-64 w-96 rounded-lg overflow-hidden"
  >
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="Before" 
      position="left" 
    />
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="After" 
      position="right" 
    />
    <MImageComparisonSlider />
  </MImageComparison>
</template>

With Controls

<template>
  <MImageComparison 
    show-controls
    class="h-64 w-96 rounded-lg overflow-hidden"
  >
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="Before" 
      position="left" 
    />
    <MImageComparisonImage 
      src="https://images.unsplash.com/photo-1587614382346-4ec70e388b28?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
      alt="After" 
      position="right" 
    />
    <MImageComparisonSlider />
  </MImageComparison>
</template>

Glowing Stars Card

Card component with animated glowing stars effect and customizable colors.

In View

Component that triggers animations when it comes into view.