Compare Slider
A slider that reveals one view over another.
Preview
Loading...
import { CompareSlider } from "@/components/ui/CompareSlider";
export function CompareSliderDemo() {
return (
<CompareSlider
before={
<div className="flex h-full items-center justify-center bg-accent-9 text-accent-contrast">Before</div>
}
after={<div className="flex h-full items-center justify-center bg-gray-4">After</div>}
/>
)Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/compare-sliderManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the CompareSlider component into your components/ui/CompareSlider.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function CompareSlider({
className,
before,
after,
label = "Compare",
defaultValue = 50,
}: {
className?: string;
before: React.ReactNode;
after: React.ReactNode;
label?: string;
defaultValue?: number;
}) {
const [value, setValue] = React.useState(defaultValue);
return (
<div data-slot="compare-slider" className={cn("relative h-16 w-full overflow-hidden rounded-sm", className)}>
<div className="absolute inset-0">{after}</div>
<div className="absolute inset-0" style={{ clipPath: `inset(0 ${100 - value}% 0 0)` }}>
{before}
</div>
<div
aria-hidden
className="absolute inset-y-0 w-0.5 bg-gray-12"
style={{ left: `${value}%` }}
/>
<input
type="range"
min={0}
max={100}
value={value}
aria-label={label}
className="absolute inset-x-1 bottom-1"
onChange={(event) => setValue(Number(event.target.value))}
/>
</div>
);
}
export { CompareSlider };