컴포넌트
Range Slider Fancy
값 말풍선이 핸들을 따라오며 드래그 시 위로 팝업·기울어지는 단일 핸들 커스텀 레인지 슬라이더로, 그라데이션 글로우 채움 트랙·스냅 눈금·키보드(화살표·PageUp/Down·Home/End)와 role=slider ARIA를 지원하고 포인터 캡처로 전역 리스너 없이 안전하게 드래그한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RangeSliderFancy-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| min | number | 0 | 슬라이더 최소 한계값 (Minimum bound of the slider) |
| max | number | 100 | 슬라이더 최대 한계값 (Maximum bound of the slider) |
| step | number | 1 | 값 증감/스냅 단위, 소수 지원 (Increment/snap step, decimals supported) |
| defaultValue | number | min + range*0.5 | 비제어 초기값, 미지정 시 범위 중앙 (Uncontrolled initial value; defaults to the range center) |
| suffix | string | "" | 값 뒤에 붙일 접미 문자 예: % (Suffix string shown after the value, e.g. %) |
| showTicks | boolean | true | 눈금 마커 표시 여부, 눈금이 너무 촘촘하면 자동 생략 (Whether to render tick markers; auto-omitted when too dense) |
| onChange | (value: number) => void | undefined | 값 변경 시 호출되는 콜백 (Callback fired with the new value on change) |