애니메이션
Spring Slider
드래그하면 트랙이 탄성적으로 늘어났다 스프링 반동으로 복귀하는 슬라이더. 포인터로 트랙 밖까지 당기면 초과 거리만큼 채움/썸이 스트레치·스쿼시되고, 놓으면 rAF 스프링이 오버슈트하며 원상 복귀한다. 제어/비제어 모두 지원하며 키보드(←/→/Home/End/PageUp·Down)와 reduced-motion을 처리한다.
- 분류
- 애니메이션
- 난이도
- hard
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpringSlider-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| min | number | 0 | 최소값. |
| max | number | 100 | 최대값. |
| step | number | 1 | 키보드/스냅 이동 단위. |
| defaultValue | number | (min+max)/2 | 비제어 초기값. |
| value | number | undefined | 제어 값. 지정 시 외부에서 값을 관리(controlled). |
| onChange | (value: number) => void | undefined | 값 변경 콜백(드래그/키보드/클릭 시 호출). |
| fromColor | string | "#C084FC" | 채움/썸 그라데이션 시작색(바이올렛). |
| toColor | string | "#EC4899" | 채움/썸 그라데이션 끝색(핑크). |
| trackHeight | number | 8 | 트랙 두께(px). |
| overshoot | number | 28 | 탄성 오버슈트 최대 늘어남(px). 트랙 밖으로 당길 때 늘어나는 한계. |
| stiffness | number | 0.16 | 스프링 강성(0~1). 클수록 빠르게 목표에 붙음. |
| damping | number | 0.68 | 감쇠(0~1). 클수록 진동 없이 안착. |
| showValue | boolean | true | 현재 값/범위 라벨 표시 여부. |
| ariaLabel | string | "슬라이더" | 슬라이더 접근성 라벨. |
| className | string | undefined | 래퍼 추가 클래스. |
| style | CSSProperties | undefined | 래퍼 인라인 스타일. |