A draggable before/after image or content comparison slider with a divider you drag with the pointer, touch, or arrow keys to reveal one version versus another.
import CompareSlider from "@/components/ui/compare-slider";
// @example Default | Two layers behind a divider. The before layer sets the size.
export default function CompareSliderDemo() {
return (
<CompareSlider
style={{ width: 440 }}
before={
<div
style={{
height: 200,
padding: "56px 28px 0",
boxSizing: "border-box",
background: "#e7e5e4",
color: "#44403c",
fontFamily: "Times New Roman, serif",
fontSize: 15,
lineHeight: 1.5,
}}
>
hi, we looked into it and you got charged 2x. refund is coming.
</div>
}
after={
<div
style={{
height: 200,
padding: "56px 28px 0",
boxSizing: "border-box",
background: "#18181b",
color: "#fafafa",
fontSize: 15,
lineHeight: 1.5,
}}
>
Hi Priya, you were charged twice for September. I have refunded the
duplicate $49. It should arrive in 3 to 5 days.
</div>
}
/>
);
}
