Back to Components

Comparison Slider

Interactive before-and-after image comparison with pointer, touch, and keyboard controls.

Ekko before edit
Ekko after edit

Installation

pnpm dlx shadcn@latest add https://itsalfi.in/r/comparison-slider.json

Usage

import  { ComparisonSlider }  from "@/components/ui/comparison-slider"
<ComparisonSlider
  beforeImage="/images/before.jpg"
  afterImage="/images/after.jpg"
  initialPosition={50}
/>

Props

Notes

  1. Drag or click anywhere across the image to move the divider.
  2. Keyboard users can focus the slider and use ArrowLeft, ArrowRight, Home, and End.
  3. The initialPosition value is clamped between 0 and 100.