Slider

사용자가 특정 범위 내에서 값을 선택할 수 있게 해주는 입력 요소입니다. 드래그나 클릭을 통해 연속적인 값이나 단계별 값을 직관적으로 조정할 수 있습니다.

Anatomy

  1. 1. Thumb
  2. 2. Heading
  3. 3. Track
  4. 4. Value

Variants

Range
Heading
Label

States

Value visibility

사용자가 현재 선택한 값의 영역을 명확하게 인지할 수 있도록 Value를 표시합니다.

Accessibility

KeyDescription
ArrowRight ArrowUpstep 옵션만큼 값을 증가시킵니다.
ArrowLeft ArrowDownstep 옵션만큼 값을 감소시킵니다.
PageUp10만큼 값을 증가시킵니다.
PageDown10만큼 값을 감소시킵니다.
Home지정된 최소값으로 값을 변경합니다.
End지정된 최대값으로 값을 변경합니다.

Min and max value

Slider의 최소 값부터 최대 값까지의 간격을 적절히 설정하여 사용자가 쉽게 조작할 수 있도록 설계합니다.

Usage

Select specific value

특정 값을 실시간 반영하여 지정합니다.

Select range value

특정 범위를 실시간 반영하여 지정합니다.

How to use

Do

범위를 명확히 인지할 수 있다면 Value는 생략할 수 있습니다.

Don’t

값을 유추할 수 없는 곳에 표기하지 않습니다.

© 2026 Wanted Lab, Inc.