Slider
GUIDE
사용자가 특정 범위의 값을 선택해야 하는 곳에 사용합니다. 변경 사항이 즉시 적용되므로 원하는 값을 찾을 때까지 슬라이더를 조정합니다.
ANATOMY
-
사용자가 선택할 수 있는 범위를 표시합니다.
좌측에 가장 작은 값, 우측에 가장 큰 값을 표시합니다.
continuous type의 경우 입력된 값 만큼 primary로 색이 채워집니다.
-
사용자가 움직일 수 있는 범위 또는 기능을 표시합니다.
선택 값을 나타내는 숫자나 기능을 나타내는 text로 구성할 수 있습니다.
-
사용자가 값을 조절하기 위해 선택할 수 있는 indicator입니다.
-
사용자가 Thumb를 눌러 값을 조절할 때 수치를 나타낼 수 있습니다.
-
값을 조절하는 기능이나 설정 기능을 나타내는 icon으로 구성할 수 있습니다.
STATES
Slider의 상태별 정의는 다음과 같습니다.
1. Fixed-value
- 사용자가 특정 범위 내의 값을 직접 선택할 수 있는 타입입니다.
- 트랙 좌측은 별도의 색상이 채워집니다.
2. Relative-offset
- 특정 포인트를 정의해놓고, 해당 포인트 근처로 드래그하는 경우 정의된 값이 선택되는 타입입니다.
- 트랙에 별도의 색상이 채워지지 않습니다.
INTERACTION
Drag & Drop
- Thumb의 drag&drop을 통해 slider의 값을 정할 수 있습니다.
- 최후 drop 시의 좌표로 값이 정해집니다.Tab & Jump
- Track,icon,label 중 하나를 눌러 slider의 값을 정할 수 있습니다.
- 최초 tap 시의 좌표로 값이 정해집니다.
- icon을 누르면 해당 방향으로 한 단계씩 thumb가 움직이며 값이 변화합니다.
USAGE
Settings
밝기,사이즈 등 여러 범위의 값 중 하나를 선택해야 할 때 사용합니다.
*slider는 화면 구성에 따라 길이에 제한이 없습니다.
필요시 component 연결을 해제해 길이를 조절하되, 기본 padding 간격을 되도록 유지합니다.
1. Fixed-value
bean 충전과 같이 절대값을 채우거나 비우는 방식으로 조절해야 하는 경우 사용합니다.
2. Relative-offset
X,Y,Z 값과 같이 상대값을 조절해야 하는 경우 사용합니다.