컴포넌트
Range Slider
두 핸들로 최소~최대 구간을 정하는 듀얼 레인지 슬라이더입니다. 채워진 그라데이션 트랙, 값 툴팁, 트랙 클릭 시 가까운 핸들 자동 선택, minGap 겹침 방지, 키보드(화살표·PageUp/Down·Home/End)와 role=slider ARIA를 지원합니다. useReducedMotion 대응 및 전역 리스너 cleanup까지 포함합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RangeSlider-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| min | number | 0 | 슬라이더 최소 한계값 |
| max | number | 100 | 슬라이더 최대 한계값 |
| step | number | 1 | 값 증감 단위 (소수 지원) |
| initialMin | number | min + range*0.25 | 구간 시작 초기값 |
| initialMax | number | min + range*0.75 | 구간 끝 초기값 |
| minGap | number | 0 | 두 핸들 사이 최소 간격 |
| prefix | string | "" | 값 앞에 붙일 접두 문자 (예: ₩) |
| suffix | string | "" | 값 뒤에 붙일 접미 문자 (예: %) |
| onChange | (range: [number, number]) => void | undefined | 값 변경 시 [최소, 최대] 콜백 |
| ariaLabel | string | "범위" | 핸들 aria-label 접두 라벨 |
| className | string | undefined | 루트 요소 추가 클래스 |