Slider

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

경계 안에서 근삿값이나 범위를 조정하세요. 값을 단위와 함께 표시하세요. 정밀 조정에는 NumberField와 함께 쓰세요.

• 정확한 값이 중요한데 드래그만 경로로 두지 마세요. 대신 NumberField를 추가하세요.
• 범위의 두 엄지에 같은 이름을 주지 마세요. 각 Thumb에 별도의 aria-label을 설정하세요.
• 현재 값을 색으로만 전달하지 마세요. Value에 단위와 함께 표시하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Label + Value + Control(Track/Indicator + one or more Thumbs)

키보드와 접근성

• Tab은 각 Thumb의 range input으로 이동합니다.
• 화살표 키는 step만큼, Page Up과 Page Down은 largeStep만큼 이동합니다. Home과 End는 경계로 점프합니다.
• 기본 thumbAlignment=edge는 엄지를 컨트롤 안에 유지합니다.
• 폼 초기화는 uncontrolled 값만 복원합니다. controlled 값은 유지하고, 취소된 초기화를 존중합니다.
• 각 범위 엄지에 고유한 이름과 단위를 주세요.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Slider } from '@surflane/ui'

<Slider.Root name='workers' defaultValue={3} min={1} max={16}>
  <Slider.Label>Parallel workers</Slider.Label>
  <Slider.Value>{(_, values) => `${values[0]} workers`}</Slider.Value>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
    </Slider.Track>
    <Slider.Thumb getAriaValueText={(_, value) => `${value} workers`} />
  </Slider.Control>
</Slider.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰