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 Custom labels | Name the two sides.
export default function CompareSliderCustomLabelsDemo() {
return (
<CompareSlider
style={{ width: 440 }}
labels={["Draft", "Alpha"]}
before={
<div
style={{
height: 180,
padding: "56px 28px 0",
boxSizing: "border-box",
background: "#e7e5e4",
color: "#44403c",
fontSize: 15,
lineHeight: 1.5,
}}
>
Export is broken for some customers, not sure why. Needs a look.
</div>
}
after={
<div
style={{
height: 180,
padding: "56px 28px 0",
boxSizing: "border-box",
background: "#18181b",
color: "#fafafa",
fontSize: 15,
lineHeight: 1.5,
}}
>
CSV export fails for workspaces over 10,000 rows. Three Lumen Labs
tickets confirm it.
</div>
}
/>
);
}
