Slider
범위 내에서 값을 선택할 수 있는 슬라이더 컴포넌트입니다. 단일 값 또는 범위 선택을 지원합니다.
개요
Slider는 Radix UI를 기반으로 구축되어 완전한 키보드 접근성과 ARIA 속성을 자동으로 지원합니다. 볼륨, 밝기, 가격 범위 등 다양한 값 선택에 활용됩니다.
50
설치
사용법
Slider 컴포넌트를 import하여 사용합니다. value와 onValueChange로 제어하거나 defaultValue로 비제어 모드로 사용합니다.
예제
크기
sm, md, lg 세 가지 크기를 지원합니다. 기본값은 md입니다.
30
50
70
색상
primary, secondary, success, danger 네 가지 색상을 지원합니다.
50
50
50
50
범위 선택
배열 값을 사용하여 시작과 끝 두 지점의 범위를 선택할 수 있습니다.
20원 - 80원
값 포맷팅
formatValue prop으로 표시되는 값을 커스텀 포맷할 수 있습니다.
30%
단계 설정
step prop으로 값의 증가 단위를 설정합니다. 기본값은 1입니다.
50
비활성화
disabled prop으로 슬라이더를 비활성화합니다.
50
접근성
Slider는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- Radix UI 기반: role="slider"가 자동 적용되고 aria-valuenow, aria-valuemin, aria-valuemax가 자동으로 설정됩니다.
- 키보드 네비게이션: 좌/우 화살표로 값을 조절하고, Home/End로 최소/최대값으로 이동합니다.
- 포커스 표시: focus-visible 시 링 스타일로 명확한 시각적 피드백을 제공합니다.
- 레이블 연결: label prop과 aria-labelledby로 스크린 리더가 목적을 인식할 수 있습니다.
- 명도 대비 4.5:1 이상을 준수하여 시각적 접근성을 보장합니다.