Components

Slider

범위 안의 값을 고릅니다. 현재 값을 항상 함께 보여줍니다.

응답 대기 시간600ms
코드 보기
<input type="range" min="200" max="1500" value="600"
  style="accent-color:var(--foreground)">
<!-- 현재 값 라벨 필수 -->

Variants

이름설명미리보기
기본accent 검정 + 값 라벨

Guidelines

✓ Do
  • 현재 값을 숫자로 항상 표시 (단위 포함)
  • 의미 있는 step 설정 (50ms 등)
✕ Don't
  • 값 라벨 없는 슬라이더 금지
  • 정밀 입력이 필요하면 숫자 입력 병행

Specification

속성토큰/값비고
accentvar(--foreground)
값 라벨0.76rem / 우측