"use client"; import * as React from "react"; import { cn, clamp } from "@/lib/utils"; export interface CompareSliderProps { beforeSrc: string; afterSrc: string; beforeLabel?: string; afterLabel?: string; position?: number; onPositionChange?: (position: number) => void; className?: string; aspectRatio?: string; } export function CompareSlider({ beforeSrc, afterSrc, beforeLabel = "Before", afterLabel = "After", position: controlledPosition, onPositionChange, className, aspectRatio = "16 / 9", }: CompareSliderProps) { const [internalPosition, setInternalPosition] = React.useState(50); const [isDragging, setIsDragging] = React.useState(false); const containerRef = React.useRef(null); const position = controlledPosition ?? internalPosition; const setPosition = (next: number) => { const clamped = clamp(next, 0, 100); if (onPositionChange) onPositionChange(clamped); else setInternalPosition(clamped); }; const updateFromClientX = (clientX: number) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const pct = ((clientX - rect.left) / rect.width) * 100; setPosition(pct); }; const startDrag = (clientX: number) => { setIsDragging(true); updateFromClientX(clientX); const onMove = (e: MouseEvent | TouchEvent) => { const x = "touches" in e ? e.touches[0].clientX : e.clientX; updateFromClientX(x); }; const onEnd = () => { setIsDragging(false); window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onEnd); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onEnd); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onEnd); window.addEventListener("touchmove", onMove); window.addEventListener("touchend", onEnd); }; return (

startDrag(e.clientX)} onTouchStart={(e) => startDrag(e.touches[0].clientX)} > {/* After (full background) */}

{/* Before (clipped) */}

{/* Divider */}

{/* Handle */}

↔

{/* Labels */} {beforeLabel} {afterLabel}

); }

Prop	Type	Default	Description
beforeSrc	string	—	Before image URL.
afterSrc	string	—	After image URL.
position	number	—	Divider position 0–100.
onPositionChange	(pos: number) => void	—	Position change handler.
className	string	—	Optional CSS class.

When to use

Demo

Props

Source

Dependencies

When to use

Demo

Props

Source

Dependencies