RangeSlider
손잡이 두 개로 정수 범위(시작~끝)를 고르는 슬라이더다. PDF 페이지 범위를 고를 때 쓴다.
- 분류
- 입력과 선택
- 가져오기
import { RangeSlider } from '@/ui/RangeSlider'- 코드 위치
apps/mobile/src/ui/RangeSlider.tsx:13
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
2쪽 ~ 5쪽
언제 쓰는가#
쓴다
- 1부터
max까지의 정수 범위를 고를 때 쓴다. 예: PDF에서 읽을 페이지 범위. - 범위 길이를 제한하려면
maxSpan을 넘긴다.
쓰지 않는다
- 값 하나를 고를 때 쓰지 않는다. 손잡이가 둘이다.
- 소수나 큰 숫자(수백 단계 이상)에 쓰지 않는다. 손으로 정확히 맞추기 어렵다. 입력 칸을 쓴다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 전체 높이 36, 손잡이 26, 레일 6 | 폭은 부모를 채운다. |
상태#
3일 ~ 6일
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 레일은 track, 고른 구간은 primary, 손잡이는 surface 원에 6px primary 테두리와 shadow(1). |
| 끌기 | 손잡이를 끌면 한 칸씩 움직이고 칸이 바뀔 때마다 선택 진동이 난다. |
사용 방법#
기본
기본
import { RangeSlider } from '@/ui/RangeSlider';
<RangeSlider max={pageCount} value={range} onChange={setRange} maxSpan={20} label={(v) => `${v}쪽`} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
max | number | — | 필수 | 고를 수 있는 가장 큰 값. 가장 작은 값은 항상 1. |
value | [number, number] | — | 필수 | [시작, 끝]. |
onChange | (v: [number, number]) => void | — | 필수 | 손잡이가 움직일 때 새 [시작, 끝]과 함께 호출된다. |
maxSpan | number | — | 선택 | 범위의 최대 길이(칸 수). 넘기면 이보다 넓게 벌릴 수 없다. |
label | (v: number) => string | — | 필수 | 값을 읽어 주는 함수. 접근성 이름("시작 3쪽")에 쓰인다. |
치수와 토큰#
- 레일
- 높이 6, 모서리 3,
track - 채움
primary- 손잡이
- 26 × 26, 원,
surface+ 6pxprimary테두리,shadow(1), 누르는 영역 사방 10~14 추가
접근성#
- 손잡이는
adjustable역할이다. 화면 읽기 프로그램에서 위아래로 쓸어 한 칸씩 바꿀 수 있다(increment,decrement). - 이름은 "시작 {label}", "끝 {label}"이다.
- 웹에서는
<input type="range">두 개로 만들어 방향키로 움직일 수 있다.
잘한 예와 잘못한 예#
2쪽 ~ 5쪽
label로 단위(쪽, 일)를 붙여 값을 읽어 준다.