# RangeSlider

손잡이 두 개로 정수 범위(시작~끝)를 고르는 슬라이더다. PDF 페이지 범위를 고를 때 쓴다.

- 분류: 입력과 선택
- 가져오기: `import { RangeSlider } from '@/ui/RangeSlider'`
- 코드 위치: `apps/mobile/src/ui/RangeSlider.tsx:13` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/range-slider

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/range-slider 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 1부터 `max`까지의 정수 범위를 고를 때 쓴다. 예: PDF에서 읽을 페이지 범위.
- 범위 길이를 제한하려면 `maxSpan`을 넘긴다.

### 쓰지 않는다
- 값 하나를 고를 때 쓰지 않는다. 손잡이가 둘이다.
- 소수나 큰 숫자(수백 단계 이상)에 쓰지 않는다. 손으로 정확히 맞추기 어렵다. 입력 칸을 쓴다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 전체 높이 36, 손잡이 26, 레일 6 | 폭은 부모를 채운다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 레일은 `track`, 고른 구간은 `primary`, 손잡이는 `surface` 원에 6px `primary` 테두리와 `shadow(1)`. |
| 끌기 | 손잡이를 끌면 한 칸씩 움직이고 칸이 바뀔 때마다 선택 진동이 난다. |

## 사용 방법

### 기본

```tsx
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` + 6px `primary` 테두리, `shadow(1)`, 누르는 영역 사방 10~14 추가 |

## 접근성

- 손잡이는 `adjustable` 역할이다. 화면 읽기 프로그램에서 위아래로 쓸어 한 칸씩 바꿀 수 있다(`increment`, `decrement`).
- 이름은 "시작 {label}", "끝 {label}"이다.
- 웹에서는 `<input type="range">` 두 개로 만들어 방향키로 움직일 수 있다.

## 잘한 예와 잘못한 예

- 잘한 예: `label`로 단위(쪽, 일)를 붙여 값을 읽어 준다.
- 잘못한 예: 손잡이만 있고 값 글자가 없으면 지금 몇 쪽인지 알 수 없다. 값을 옆에 글자로 함께 보여 준다.

## 함께 보는 컴포넌트

- [Calendar](https://developers.moring.co/tds/components/date-calendar.md): 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.
- [TimeSheet](https://developers.moring.co/tds/components/time-sheet.md): 아래에서 올라오는 시트에서 시각을 고른다. 오전/오후, 시, 분(5분 단위) 세 줄 바퀴를 돌려서 고른다.