슬라이더
범위 안에서 대략의 값을 손으로 맞추는 컨트롤입니다. 단일 · 범위 · 눈금 · 세로를 한 부품이 맡습니다.
파인 홈 위에 primary 채움, 손잡이는 작은 키캡(1,1)이라 손을 올리면 솟고 끄는 동안 가라앉습니다. 끄는 동안과 키보드 포커스 때 손잡이 위에 값 말풍선이 뜹니다. 값은 늘 라벨 옆 글자로도 보여 줍니다. radix-ui 가 필요합니다.
- import
- import { Slider, SliderInput } from "@uyoolabs/ui/form";
- 쓰는 곳
- 대략 맞추면 되는 값(음량 · 기준선 · 범위 거르기), 단계가 고르지 않은 값(15분 · 1시간 · 4시간 · 1일)은 눈금 이름과 step 1 로. 정확한 숫자가 중요하면 SliderInput 을 곁에 둡니다.
- 쓰지 않는 경우
- 두세 개 중 하나를 고르는 데 쓰지 않습니다(SegmentedControl · RadioGroup). 끄는 도중마다 서버를 부르지 않습니다(onValueCommit). 채움에 상태 색(빨강 · 노랑)을 쓰지 않습니다(위험 기준은 눈금 · 문장으로).
Slider · SliderInput
| 키 | 동작 |
|---|---|
| ←·↓ | 한 단계 줄인다 |
| →·↑ | 한 단계 늘린다(세로는 ↑ 가 커진다) |
| PageUp·PageDown | 열 단계. 눈금이 있으면 다음 · 이전 눈금 |
| Home·End | 최소 · 최대 |
| Tab | 범위는 손잡이마다 정지점이 하나씩. 두 손잡이는 서로를 넘지 않는다 |
| Enter | SliderInput 의 값을 반영한다(조합 중이면 무시). 범위 밖이면 오류 문장, 슬라이더는 그대로 |
props
소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.
Slider
| prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number[] | — | 값(제어). 손잡이마다 하나, 범위는 둘 |
| defaultValue | number[] | — | 처음 값(비제어) |
| onValueChange | (value: number[]) => void | — | 끄는 동안 · 키를 누를 때마다 부른다 |
| onValueCommit | (value: number[]) => void | — | 손을 뗄 때 · 키를 눌렀을 때 한 번. 서버로 보내는 일은 여기서 한다 |
| size | "sm" | "md" | "md" | md 는 홈 6 · 손잡이 18, sm 은 홈 4 · 손잡이 14(표 · 툴바) |
| marks | SliderMark[] | — | 눈금. 홈 아래 2×6 표시 + 이름, 지금 값 이름만 진하게. PageUp · PageDown 이 다음 · 이전 눈금으로 간다 |
| formatValue | (value: number) => string | — | aria-valuetext · 말풍선에 쓰는 사람이 읽는 값(‘4시간’ · ‘₩50,000’). 없으면 Intl 숫자 |
| bubble | boolean | true | 끄는 동안 · 키보드 포커스 때 손잡이 위 말풍선(결정 #54). 값은 라벨 옆 글자로도 늘 보인다 |
| thumbLabels | string[] | — | 손잡이마다 접근성 이름. 범위는 준다(‘최소 금액’ · ‘최대 금액’). 단일은 Field 라벨을 쓴다 |
| lang | "ko" | "en" | "ja" | "ko" | 내장 문구의 언어 |
| labels | Partial<SliderLabels> | — | 내장 문구 중 바꿀 것만 |
이 밖에 Radix Slider.Root props(asChild · value · defaultValue · onValueChange · onValueCommit 제외)를 그대로 받습니다. 기본값을 바꾼 것은 min=0 · max=100 · step=1 · orientation="horizontal" 입니다.
SliderInput
| prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value필수 | number[] | — | 곁의 Slider 와 같은 값 |
| onValueChange필수 | (value: number[]) => void | — | 곁의 Slider 와 같은 바꾸기 |
| min | number | 0 | |
| max | number | 100 | |
| step | number | — | |
| index | number | 0 | 범위면 어느 손잡이인지 |
| unit | string | — | 칸 끝 글자(‘%’ · ‘원’) |
| lang | "ko" | "en" | "ja" | "ko" | |
| labels | Partial<SliderLabels> | — |
이 밖에 <input> props(value · onChange · defaultValue · size · min · max · step 제외)를 그대로 받습니다.