RangeSlider

한눈에#

가격대·연식·기간처럼 시작~끝 두 값(범위) 을 어림으로 고르는 두-썸 슬라이더입니다 — 두 썸은 교차하지 않습니다(low ≤ high).

사용 시점#

시작~끝 두 값(범위)을 어림잡아 고르면 RangeSlider — 단일 값이나 정밀 정수는 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { RangeSlider } from '@wds/ui-web';

<RangeSlider
  aria-label="가격 범위"
  defaultValue={[20, 80]}
  min={0}
  max={100}
  step={5}
/>

변형#

formatLabel은 함수라 라이브 데모로 넘길 수 없어 코드로 안내합니다 — showValue 라벨과 두 입력의 aria-valuetext에 포맷된 값이 노출됩니다.

<RangeSlider
  aria-label="가격"
  min={0}
  max={200}
  step={10}
  defaultValue={[40, 160]}
  showValue
  formatLabel={(v) => `${v.toLocaleString()}원`}
/>

크기#

단일 크기입니다 — 4px(space.1) 트랙 + 18px(icon.size-md) 썸 2개. 필드 높이는 control.height-md(44px)로 썸보다 큰 터치 타깃을 확보합니다. 두 썸 사이는 color.primary 채움 트랙으로 표시합니다(기하만 %, 색은 토큰).

상태#

• Focus — 각 썸 :focus-visible에 primary 링 (Tab으로 두 썸을 차례로 확인하세요)
• Disabled — 트랙·채움·썸이 color.border-subtle/color.text-placeholder 톤으로 가라앉고 커서 차단
• 교차 방지(no-cross) — 낮은 값 썸이 높은 값을 넘어서면 두 값을 정렬해 low ≤ high를 유지합니다

Props#

접근성#

두 개의 네이티브 input[type="range"](낮은 값·높은 값)라 각각이 실제 슬라이더로 키보드·ARIA가 브라우저에서 보장됩니다. 단일 Slider와 같은 전략을 두 썸으로 확장한 별도 컴포넌트입니다.

• 각 썸은 자체 aria-label 을 가집니다 — aria-label에서 "최소"/"최대"를 파생하거나 aria-label-min/aria-label-max로 직접 지정합니다
• formatLabel 제공 시 두 입력에 aria-valuetext 노출 — SR이 원시 숫자 대신 포맷된 값("20원")을 읽도록 합니다(문자열·숫자 포맷만 직렬화, 복합 노드는 네이티브 값 낭독으로 폴백)
• showValue 범위 라벨은 중복 낭독을 막기 위해 aria-hidden
• 채움 트랙은 순수 장식이라 aria-hidden — 값 정보는 두 슬라이더가 전달합니다

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).