Range Slider
Primitive범위 내 값을 조정할 수 있는 요소입니다.
구조도
- Root
- Range
- Handle
- Tick
- Track
- Marker Group
- Marker
컴포넌트 미리보기
옵션
Marker
Marker 옵션을 사용하여 Range Slider에 Marker와 Tick(눈금)을 표시할 수 있습니다. 이 옵션은 사용자가 각 값의 위치를 쉽게 파악하고 선택할 수 있도록 돕습니다.
Disabled
Disabled 상태는 Range Slider가 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.
옵션 테이블
| 속성 | 값 | 기본값 | 설명 |
| is disabled | true, false | false | True일 경우, Range Slider가 유저와 상호작용하지 않음 |
| label | text | ||
| min | number | 0 | |
| max | number | 100 | |
| step | number | 1 |
상호작용
터치 / 마우스
마우스 클릭 또는 터치로 Range Slider와 상호작용할 수 있습니다.
Drag
Handle을 드래그하여 값을 조정할 수 있습니다.
Track
Track을 터치하면 해당 위치로 Handle이 이동합니다.
가이드라인
Do / Don't
Do
Label과 함께 사용하여 유저가 Range Slider의 목적과 선택된 값을 명확히 알 수 있도록 합니다.
Don't
Handle의 위치에 따라 움직이는 Label을 사용할 경우, Handle 아래에 배치하지 않습니다. Range Slider 조작시 손가락에 가려져 선택된 값을 파악하기 어렵습니다.
Do
Marker는 간결하게 작성합니다.
Don't
Marker가 길어지지 않도록 유의합니다. 유저가 Tick의 위치를 파악하기 어려울 수 있습니다.