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 Starting position | Set initial from 0 to 1 to favour one side.
export default function CompareSliderStartingPositionDemo() {
return (
<CompareSlider
style={{ width: 440 }}
initial={0.25}
labels={["Last week", "This week"]}
before={
<div
style={{
height: 160,
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#e7e5e4",
color: "#44403c",
fontSize: 40,
fontWeight: 600,
}}
>
11m reply time
</div>
}
after={
<div
style={{
height: 160,
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#18181b",
color: "#fafafa",
fontSize: 40,
fontWeight: 600,
}}
>
4m reply time
</div>
}
/>
);
}
