컴포넌트
Compare Slider
좌우 두 패널을 드래그 핸들로 나눠 비교하는 슬라이더. 오른쪽 패널을 clip-path(inset)로 분할해 왼쪽 위에 겹치며, 포인터 드래그와 키보드(←/→/Home/End) 조작을 모두 지원한다. 두 패널은 CSS 그라데이션으로 표현.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CompareSlider-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| before | ComparePanel | { label: "Before", background: "linear-gradient(135deg, #2A2440 0%, #16121F 100%)", textColor: "#C084FC" } | 왼쪽(before) 패널. label(라벨), background(CSS 그라데이션), textColor(라벨 색)로 구성. |
| after | ComparePanel | { label: "After", background: "linear-gradient(135deg, #C084FC 0%, #EC4899 100%)", textColor: "#16121F" } | 오른쪽(after) 패널. clip-path로 분할되어 왼쪽 위에 겹쳐 노출된다. |
| initialPosition | number | 50 | 초기 분할 위치(0~100, %). |
| step | number | 2 | 키보드 화살표 조작 시 이동 스텝(%). |
| ariaLabel | string | "이미지 비교 슬라이더" | 슬라이더 접근성 라벨. |
| className | string | undefined | 루트 요소에 추가할 클래스. |