03 · Components · 입력
슬라이더Slider
연속적인 값을 직관적으로 조절. 볼륨·밝기처럼 현재 값을 바로 확인하며 변경이 필요할 때 사용합니다.
StableWCAG AA
기본
40
단계 구분
정해진 단계가 있다면 step과 min/max로 구간을 명확히 하세요. 현재 값 레이블을 우측에 함께 노출하면 접근성 이 좋아집니다.
3
네이티브 input[type=range]는 키보드 방향키로 1 step씩, PageUp/PageDown으로 더 크게 이동할 수 있습니다. 현재 값을 반드시 시각적으로 노출하고 aria-label 또는 연결된 label을 두세요.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | 최소값. |
max | number | 100 | 최대값. |
step | number | 1 | 증감 단위. |
invalid | boolean | aria-invalid 부여. |