Slider
먼저 보고, 그다음 계약을 읽습니다
범위 안에서 단일 값을 고르는 슬라이더 (네이티브 range, dep 0).
Component intent의도와 경계 읽기
네이티브 <input type=range> 위의 얇은 래퍼로 외부 의존성이 없다. 키보드 내비게이션(←/→·Home/End)·role=slider·aria-valuenow 는 브라우저가 기본 제공하고, @axe/ui 는 track/thumb 를 토큰으로 그린다. 진행 채움은 --axe-slider-pct(0~100) CSS 변수로 표현해 JS 없이도 서버(maud/jinja)가 같은 모양을 낼 수 있다. showValue·formatValue 로 현재 값을 우측에 표시한다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Slider } from "@axe/ui";<Slider value={vol} onValueChange={setVol} min={0} max={100} showValue formatValue={(v) => `${v}%`} ariaLabel="볼륨"/><div class="axe-slider"> <input class="axe-slider__input" type="range" min="0" max="100" value="40" aria-label="볼륨" style="--axe-slider-pct: 40" /> <output class="axe-slider__value">40%</output></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
value | number | 필수 | — | 현재 값 (controlled). |
onValueChange | (value: number) => void | 필수 | — | 값이 바뀔 때 콜백. |
min | number | — | 0 | 최소값. |
max | number | — | 100 | 최대값. |
step | number | — | 1 | 증감 단위. |
showValue | boolean | — | false | 우측에 현재 값 라벨(<output>) 표시. |
formatValue | (value: number) => string | — | — | 값 라벨 포맷터 (예: (v) => `${v}%`). showValue 일 때만 사용. |
ariaLabel | string | — | — | visible label 이 없을 때 range input 의 접근성 라벨(필수에 준함). |
disabled | boolean | — | false | 비활성 (흐림 + 커서 차단). |
...rest | React.InputHTMLAttributes<HTMLInputElement> | — | — | 나머지는 range input 으로 전파 (value·onChange·type·min·max·step 제외). |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-slider | stable | flex 래퍼(range input + 선택적 값 라벨). |
.axe-slider--disabled | stable | 비활성 변형(전체 흐림). |
.axe-slider__input | stable | range input — 토큰 track/thumb, --axe-slider-pct 로 accent 채움. |
.axe-slider__value | stable | 우측 현재 값 라벨(tabular-nums). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- ←/↓ 감소, →/↑ 증가 (step 단위)
- Home/End 로 최소/최대
- PageUp/PageDown 으로 큰 폭 증감 (네이티브 range 기본)
네이티브 <input type=range> — 브라우저가 role=slider + aria-valuenow/valuemin/valuemax 를 자동 제공. visible label 이 없으면 ariaLabel 을 반드시 지정.
focus-visible 시 thumb 에 --ring. 채움은 --axe-slider-pct(0~100) CSS 변수로 그라데이션(WebKit)·::-moz-range-progress(Firefox) 양쪽 스타일. prefers-reduced-motion 시 thumb 트랜지션 제거.