Interactive

Image compare

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

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>
  <div class="flex justify-center">
    <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-highlighted bg-default px-2 py-1 rounded absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap">
          Drag to compare
        </div>
      </MImageComparisonSlider>
    </MImageComparison>
  </div>
</template>

Examples

Basic Image compare

Before & After Comparison

OriginalEnhanced

<template>
  <div class="flex justify-center">
    <div class="w-full max-w-3xl">
      <h3 class="text-2xl font-bold text-center mb-8 text-highlighted">
        Before & After Comparison
      </h3>
      <MImageComparison class="h-96 w-full rounded-xl overflow-hidden shadow-xl">
        <MImageComparisonImage
          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
          alt="Mountain before editing"
          position="left"
          class="object-cover"
        />
        <MImageComparisonImage
          src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
          alt="Mountain after editing"
          position="right"
          class="object-cover"
        />
        <MImageComparisonSlider>
          <template #default>
            <div class="w-10 h-10 rounded-full bg-default flex items-center justify-center shadow-xl">
              <UIcon
                name="i-lucide-move-horizontal"
                class="w-5 h-5 text-default"
              />
            </div>
          </template>
        </MImageComparisonSlider>
      </MImageComparison>
      <div class="flex justify-between mt-6 text-sm text-muted">
        <span>Original</span>
        <span>Enhanced</span>
      </div>
      <div class="mt-6 text-center">
        <UButton
          color="primary"
          variant="solid"
          size="lg"
        >
          Try It Yourself
        </UButton>
      </div>
    </div>
  </div>
</template>

Customize

Enable Hover

Spring Options

Initial Position50

Modeslide

Orientationhorizontal

Enable Zoom

Show Controls

Show Position

Auto Play

Auto Play Duration3000

Snap To Steps

Aria LabelImage comparison slider

Left Image LabelBefore image

Right Image LabelAfter image

Props

MImageComparison Props

Prop	Type	Default	Description
`class`	`string`	`''`	CSS classes to apply to the container.
`enableHover`	`boolean`	`false`	Enable hover-based interaction instead of drag.
`springOptions`	`SpringOptions`	`{ bounce: 0, duration: 0.1 }`	Spring animation options for slider movement.
`initialPosition`	`number`	`50`	Initial slider position as a percentage (0-100).
`mode`	`string`	`'slide'`	Comparison mode: 'slide', 'fade', 'curtain', or 'circle'.
`orientation`	`string`	`'horizontal'`	Slider orientation: 'horizontal' or 'vertical'.
`enableZoom`	`boolean`	`false`	Enable zoom functionality.
`showControls`	`boolean`	`true`	Show reset controls.
`showPosition`	`boolean`	`false`	Show position indicator.
`autoPlay`	`boolean`	`false`	Enable automatic sliding.
`autoPlayDuration`	`number`	`3000`	Duration between automatic slides in milliseconds.
`snapToSteps`	`boolean`	`false`	Snap slider to predefined steps.
`steps`	`number[]`	`[0, 25, 50, 75, 100]`	Steps to snap to when snapToSteps is enabled.
`ariaLabel`	`string`	`'Image comparison slider'`	ARIA label for accessibility.
`leftImageLabel`	`string`	`'Before image'`	ARIA label for the left image.
`rightImageLabel`	`string`	`'After image'`	ARIA label for the right image.

MImageComparisonImage Props

Prop	Type	Default	Description
`src`required	`string`	-	Source URL of the image.
`alt`required	`string`	-	Alternative text for the image.
`position`required	`string`	-	Position of the image: 'left' or 'right'.
`class`	`string`	`''`	CSS classes to apply to the image.

MImageComparisonSlider Props

Prop	Type	Default	Description
`class`	`string`	`''`	CSS classes to apply to the slider.

Events

Event	Payload	Description
`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.

Edit this pageorReport an issue

Hover Image List

A list of links that reveals a preview image next to the pointer, with a slight skew driven by pointer speed.

Image Metadata Preview

A photo preview whose metadata panel rises from the bottom, lifting the image clear as the panel opens.