Slider
가로 또는 세로 track에서 하나의 값이나 정렬된 범위를 선택해요.
핵심 속성
| 속성 | 동작 |
|---|---|
| value | 단일 slider는 숫자 또는 항목 하나짜리 배열을 받고, range는 정렬된 배열과 값마다 인덱스를 지정한 Thumb를 사용해요. |
| range | min, max, step, minStepsBetweenValues가 pointer와 keyboard 변경 폭을 제한해요. |
| form | name은 현재 thumb 값을 native hidden input으로 직렬화해요. |
| validation | TRSlider에는 native required가 없어요. 비즈니스 규칙은 TRField.Root에 두고 TRField.Error를 표시한 뒤 유효하지 않은 thumb로 focus를 옮기세요. |
밀도 높은 컨트롤 화면에 slider를 넣을 때는 uiSize="md"을 사용하세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/slider.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRSlider } from '@tinyrack/ui/components/slider';
import { TRField } from '@tinyrack/ui/components/field';
import { TRForm } from '@tinyrack/ui/components/form';
import { TRButton } from '@tinyrack/ui/components/button';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
사용할 수 없는 슬라이더 고유 링크
값은 보여 주되 조작하거나 제출할 수 없어야 할 때 Root를 비활성화하세요.
두 thumb 범위 고유 링크
Root는 Intl.NumberFormat으로 보이는 값을 형식화하고, 각 Thumb은 보조 기술에 역할을 설명하는 값 텍스트를 제공해요.
Field가 소유한 유효성 검사와 포커스 복구 고유 링크
60% 미만으로 submit해 thumb에 focus하고 오류를 표시하세요. 값을 올려 오류를 지운 다음 다시 submit하세요.
API
Root, Label, Value, Control, Track, Indicator, Thumb와 prop/state type을 @tinyrack/ui/components/slider에서 export해요. Root는 thumb 하나에는 scalar number 또는 readonly number array를 받아요. range에는 array를 쓰고, 각 range Thumb에 0부터 시작하는 index를 지정해 SSR과 hydration이 올바른 값에 매핑되도록 하세요.
| 목적 | 공개 prop과 기본값 |
|---|---|
| 척도 | min={0}, max={100}, step={1}, largeStep={10}이 기본값이에요. |
| layout | `orientation="horizontal" |
| range | minStepsBetweenValues 기본값은 0이에요. `thumbCollisionBehavior="push" |
| thumb 가장자리 | `thumbAlignment="center" |
| 상태와 form | 제어형 value 또는 defaultValue, disabled={false}, name, 외부 form을 받아요. |
Value가 렌더링하는 Intl.NumberFormat 출력을 설정하려면 Root에서 format과 locale을 사용하세요. 각 Thumb에 간결한 접근 가능한 이름을 제공하고, 형식화된 숫자에 “20퍼센트에서 시작해요” 같은 role 맥락이 필요하면 getAriaValueText(formattedValue, value, index)를 사용하세요. 값이 바뀌어도 텍스트가 올바른 경우에만 고정 aria-valuetext를 사용하세요.
onValueChange는 pointer와 keyboard의 실시간 변경을 보고해요. 완료된 상호작용 후 한 번만 실행할 작업에는 onValueCommitted를 사용하세요. 화살표 키는 step만큼 값을 바꾸고 Page Up/Page Down과 Shift+Arrow는 largeStep을 사용하며 Home/End는 경계로 이동해요. name은 form 제출용 native range input을 만들고, Thumb의 inputRef는 focus를 되돌릴 때 그 input에 접근해요. minStepsBetweenValues와 thumbCollisionBehavior는 range thumb가 서로 가까워지거나 교차하는 방식을 정의해요.