슬라이더
값 하나를 끌어서 정해요. 라벨과 지금 값이 한 줄에 같이 보여요.
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 범위(가격·세대수)를 끌어서 고를 때. 분포 막대를 함께 둘 수 있어요.
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
해부도#
- 1
라벨
무엇을 고르는지예요.
- 2
값
지금 값을 사람 말로(format) 보여 줘요.
- 3
트랙
채운 구간은 브랜드 파랑이에요. 손잡이 18px.
- 4
도움말
선택이에요. 값의 뜻을 한 줄로 적어요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
Slider#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| label* | - | string | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| value* | - | number | 지금 값이에요. |
| onChange* | - | (v: number) => void | 값이 바뀌면 새 값으로 불러요. |
| min* | - | number | 최솟값이에요. |
| max* | - | number | 최댓값이에요. |
| step* | - | number | 한 칸의 크기예요. |
| format | - | (v: number) => string | 현재값을 사람 말로 - `${v}만원`처럼. 없으면 숫자 그대로. |
| hint | - | string | 값 아래 한 줄(선택) - 지금 값이 뜻하는 것. |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| marks | - | SliderMark[] | 눈금(선택) - 트랙 아래 표시 + 이름. 없으면 예전 그대로 |
| snap | 0 | number | 눈금에 붙는 거리(값 단위, 0이면 붙지 않음) |
| keyStep | - | number | 화살표 키 한 번에 움직일 값(기본 = step) · Shift와 함께면 bigStep |
| bigStep | - | number | |
| valueText | - | string | ((v: number) => string) | 화면 읽기 프로그램이 읽을 값(aria-valuetext) - 예: v => `${v}픽셀` |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
Slider#
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | 최소 폭 | 0px |
| label | 글자 크기 | t-cap | |
| 굵기 | 500 | ||
| 글자색 | dim | ||
| value | 넘침 | 말줄임(…) | |
| 글자 크기 | t-label | ||
| 굵기 | 700 | ||
| 글자색 | ink | ||
| track | 바깥 아래 여백 | -8px | |
| 높이 | 24px | ||
| 폭 | 100% | ||
| 커서 | grab | ||
| 모서리 | 완전 원(9999px) | ||
| 위아래 여백 | 8px | ||
| track::thumb | 크기 | 18px | |
| 모서리 | 완전 원(9999px) | ||
| 테두리 두께 | 2px | ||
| 테두리 색 | surface | ||
| 배경색 | brand | ||
| hint | 바깥 위 여백 | 4px | |
| 글자 크기 | t-micro | ||
| 글자색 | dim | ||
| track | 채운 구간 | brand | |
| 남은 구간 | chip | ||
| enabled · 폰(767px 이하) | track | 글자 크기 | 16px · 입력 확대 방지 규칙 |
| focus | track | 초점 링 두께 | 2px |
| 초점 링 색 | brand 40% |
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
역할과 속성#
| 요소 | 역할 · 속성 |
|---|---|
| 트랙 | input type="range" · aria-label=label · aria-valuetext=화면 값 |
키보드#
| 키 | 동작 |
|---|---|
| ← → · ↑ ↓ | 한 칸(step)씩 움직여요 |
| Home · End | 최솟값 · 최댓값 |
| Page Up · Page Down | 브라우저가 정한 큰 걸음으로 움직여요 |
화면 읽기 프로그램#
- 화면에 보이는 값(format)을 aria-valuetext로 읽어요. valueText로 바꿀 수 있어요.
초점#
- 키보드로 오면 트랙에 브랜드 파랑 링이 생겨요.
- 세로 스크롤은 페이지가 받아요. 목록을 훑다 값이 끌려가지 않아요.
가이드라인#
언제 쓰나요#
- 정답이 몇 개로 나뉘지 않는 연속 값(소득·금리)을 고를 때.
이렇게 써요#
쓰는 규칙#
이렇게 하지 않아요
- 고를 수 있는 값이 서너 개뿐이면 칩을 써요.
문구#
- 라벨은 명사로 적어요("연 소득").
- 값에는 단위를 붙여요("6,000만 원").
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |