Slider
트랙과 손잡이로 연속값을 조절(라이브러리 전용).
- 라이브러리 전용
개요
미리보기
1432
예시
상태
기본
1432단위
14 px32 px5씩
1432도움말
1432미리보기 문장에 바로 반영돼요.비활성
1432
쓰임 예
범위 숨김
이렇게 · 이렇게 하지 않기
- 이렇게 정확한 값이 중요하지 않은 연속값에만 쓴다. 현재 값을 숫자로 함께 보여주고 키보드 화살표로 조절할 수 있게 한다. 자기 평가 점수를 받는 데 쓰지 않는다.
- 이렇게 정확한 값보다 대략의 조절이 중요할 때. 정확한 숫자는 NumberInput.
- 이렇게 하지 않기 드래그 중에 값을 알리지 않는다. 값 말풍선으로 손가락 아래를 가리지 않는다(옆에 출력).
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | ReactNode | 텍스트 크기 | 항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다. |
hint? | ReactNode | | 상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음. |
error? | ReactNode | | 오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다. |
disabled? | boolean | false | Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다. |
min? | number | — | 최솟값. 기본 0. |
max? | number | — | 최댓값. 기본 100. |
step? | 1 | 5 | 10 | 1 | 한 칸. PageUp/PageDown은 네이티브로 더 크게 이동한다. |
defaultValue? | number | — | 비제어 초기값(기본 min). 제어하려면 value + onChange. |
unit? | string | | 값 뒤 단위. aria-valuetext에도 들어간다(“20 px”). |
showRange? | boolean | true | 트랙 아래 최솟값·최댓값 표시. |
ref | — | — | ref는 <input type="range">로 전달된다. |
| 그 밖의 속성 | — | — | name, value, onChange, aria-* 등 네이티브 range 속성은 그대로 전달된다. className·style은 받지 않는다. |
접근성
키보드: 네이티브: ←→ 한 칸, PageUp/PageDown 크게, Home/End 처음·끝.
- 누르는 영역은 트랙 전체 높이 44px.
- 보이는 출력은 aria-hidden이고 값은 aria-valuetext로 읽힌다(중복 방지).
- 범위 슬라이더(손잡이 2개)는 아직 없다.