compare-slider-controlled-demo

1"use client";
2 
3import * as React from "react";
4import {
5  CompareSlider,
6  CompareSliderAfter,
7  CompareSliderBefore,
8  CompareSliderHandle,
9} from "@/registry/bases/base/ui/compare-slider";
10 
11export default function CompareSliderControlledDemo() {
12  const [value, setValue] = React.useState(30);
13 
14  return (
15    <CompareSlider
16      value={value}
17      onValueChange={setValue}
18      className="h-[400px] overflow-hidden rounded-lg border"
19    >
20      <CompareSliderBefore label="Original">
21        {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}
22        <img
23          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80"
24          alt="Original"
25          className="size-full object-cover"
26        />
27      </CompareSliderBefore>
28      <CompareSliderAfter label="Enhanced">
29        {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}
30        <img
31          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80&sat=50"
32          alt="Enhanced"
33          className="size-full object-cover"
34        />
35      </CompareSliderAfter>
36      <CompareSliderHandle />
37    </CompareSlider>
38  );
39}