Slider

Slider (슬라이더)

슬라이더는 주어진 범위 안에서 사람들이 값을 설정하게 해 주는 요소예요. 볼륨 컨트롤처럼 즉시 적용될 수도 있고, 폼처럼 제출을 요구할 수도 있죠. 트랙 위에서 손잡이(thumb)를 움직여 값을 조절하는 방식이에요.

부정확한 값에는 슬라이더를 사용하세요. 아주 작거나 아주 큰 범위에는 사용하지 마세요. 달러 금액 같은 정확한 숫자 입력이 필요하다면 input을 시도해 보세요.

출처: React Slider 문서

Default

Default (기본) — 기본 슬라이더는 밝기 컨트롤처럼 표시되지 않은(unmarked) 범위를 따라 어떤 근사 값이든 선택하게 해 줘요.

Step

Step (단계) — 단계 슬라이더는 화면 해상도 설정처럼 트랙을 개별 값으로 나누고, 트랙이 선택된 곳에 가장 가까운 특정 값으로 손잡이(thumb)를 스냅해요.

슬라이더는 트랙을 따라 손잡이를 움직이거나, 손잡이가 점프할 트랙의 한 지점을 선택해서 조작할 수 있어요. 모든 상호작용은 마우스, 키보드, 터치에 최적화되어 있어요.

Thumb selection

손잡이 선택

Track selection

트랙 선택

슬라이더는 세로 또는 가로로 배치할 수 있어요.

Vertical alignment

세로 정렬

Horizontal alignment

가로 정렬

라벨이 숨겨져 있더라도 슬라이더에는 항상 라벨을 사용하세요. 슬라이더의 현재 값을 라벨링하기 위해 툴팁을 사용하는 것이 흔해요. 툴팁의 정보는 화면 낭독기를 사용하는 사람들에게도 지각 가능(perceivable)해야 해요.

Slider label

슬라이더 라벨은 범위가 무엇을 나타내는지 간단히 설명해야 해요. 범위의 최솟값과 최댓값에 값을 정의하세요. 숫자가 아닌 범위에는 min/max, high/low처럼 평행한 용어(parallel terminology)를 사용하세요.

Content correct

Content incorrect