A before/after image slider that reveals two overlapping images with a draggable divider you control by pointer, touch, or a range input.
"use client";
import ImageCompare from "@/components/ui/image-compare";
import { useState } from "react";
export default function ImageCompareDemo() {
const field = (ground: string, mark: string) =>
`data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="720" height="360"><pattern id="d" width="36" height="36" patternUnits="userSpaceOnUse"><path d="M18 13l5 5-5 5-5-5z" fill="${mark}"/></pattern><rect width="720" height="360" fill="${ground}"/><rect width="720" height="360" fill="url(#d)"/></svg>`)}`;
const [value, setValue] = useState(50);
return (
<div className="w-full max-w-xl mx-auto p-6">
<ImageCompare
label="Surface study"
before={{
src: field("#141413", "#7e776b"),
alt: "Ink surface with muted diamonds",
}}
after={{
src: field("#f4f0e8", "#93877a"),
alt: "Paper surface with warm diamonds",
}}
value={value}
onValueChange={setValue}
beforeLabel="Ink"
afterLabel="Paper"
/>
</div>
);
}