Slider

GUIDE

사용자가 특정 범위의 값을 선택해야 하는 곳에 사용합니다.
변경 사항이 즉시 적용되므로 원하는 값을 찾을 때까지 슬라이더를 조정합니다.

---

ANATOMY

• 1. Track

  • 사용자가 선택할 수 있는 범위를 표시합니다.

  • 좌측에 가장 작은 값, 우측에 가장 큰 값을 표시합니다.

  • continuous type의 경우 입력된 값 만큼 primary로 색이 채워집니다.

• 2. Label (optional)

  • 사용자가 움직일 수 있는 범위 또는 기능을 표시합니다.

  • 선택 값을 나타내는 숫자나 기능을 나타내는 text로 구성할 수 있습니다.

• 3. Thumb

  사용자가 값을 조절하기 위해 선택할 수 있는 indicator입니다.

• 4. Tooltip (pressed/optional)

  사용자가 Thumb를 눌러 값을 조절할 때 수치를 나타낼 수 있습니다.

• 5. Icon (optional)

  값을 조절하는 기능이나 설정 기능을 나타내는 icon으로 구성할 수 있습니다.

---

STATES

Slider의 상태별 정의는 다음과 같습니다.

1. Fixed-value
- 사용자가 특정 범위 내의 값을 직접 선택할 수 있는 타입입니다.
- 트랙 좌측은 별도의 색상이 채워집니다.

2. Relative-offset
- 특정 포인트를 정의해놓고, 해당 포인트 근처로 드래그하는 경우 정의된 값이 선택되는 타입입니다.
- 트랙에 별도의 색상이 채워지지 않습니다.

---

INTERACTION

1. Drag & Drop
   - Thumb의 drag&drop을 통해 slider의 값을 정할 수 있습니다.
   - 최후 drop 시의 좌표로 값이 정해집니다.

2. Tab & Jump
   - Track,icon,label 중 하나를 눌러 slider의 값을 정할 수 있습니다.
   - 최초 tap 시의 좌표로 값이 정해집니다.
   - icon을 누르면 해당 방향으로 한 단계씩 thumb가 움직이며 값이 변화합니다.

---

USAGE

Settings
밝기,사이즈 등 여러 범위의 값 중 하나를 선택해야 할 때 사용합니다.
*slider는 화면 구성에 따라 길이에 제한이 없습니다.
필요시 component 연결을 해제해 길이를 조절하되, 기본 padding 간격을 되도록 유지합니다.

1. Fixed-value

bean 충전과 같이 절대값을 채우거나 비우는 방식으로 조절해야 하는 경우 사용합니다.

2. Relative-offset

X,Y,Z 값과 같이 상대값을 조절해야 하는 경우 사용합니다.