Slider Usage
사용자가 특정 범위 안에서의 값을 선택할 수 있도록 합니다.
Layout
Spacing
Handle과 value label 사이의 간격은 spacing/100을 적용합니다.
Size
Value label은 최소 너비 32px를 가집니다. 내부 패딩은 spacing/100을 적용합니다.
Handle의 크기는 가로 세로 12px로 고정 제공합니다.
Content
색상 범위를 설정하는 경우에는 track 위에 색상을 표현할 수 있습니다. Handle의 색상은 해당 위치의 색상을 그대로 표현합니다.
Behaviors
Interactions
입력 값 조정
Slider는 최소, 최대로 정의되는 입력 범위 내에서 기본 값을 항상 가집니다. 사용자는 handle을 드래그 앤 드롭하거나, active track 영역을 클릭하는 것으로 입력 값을 조정할 수 있습니다.
Slider가 text field와 함께 제공되는 경우에는 text field 내에 특정 값을 직접 입력할 수 있습니다.
Value Label 노출
사용자가 입력을 쉽게 인지할 수 있도록 slider handle 위에 커서를 올리거나 클릭할 때 handle이 위치한 곳에 해당하는 값을 value label을 통해 나타낼 수 있습니다.
Range slider 입력
Range slider에서는 start handle과 end handle이 구분됩니다.
Start handle은 end handle과 동일한 값으로 설정되거나 더 큰 값을 가질 수 없습니다. 유효한 범위 입력을 위해 두 handle 사이에는 한 스텝 만큼의 최소 간격을 가집니다.
Start handle과 end handle은 track에서 1 step 이상의 최소 간격을 유지합니다.
Start handle이 end handle보다 큰 값을 가지지 않습니다.