Slider
Slider (슬라이더)
슬라이더는 조정 가능한 콘텐츠를 시각적으로 보여주는 컴포넌트예요. 사용자가 가로 트랙을 따라 핸들을 움직여 값을 늘리거나 줄일 수 있습니다. 슬라이더 트랙 안에서 단일 값 또는 값 범위를 선택할 수 있는 입력 요소입니다.
출처: Slider
본문
개요 (Overview)
슬라이더는 사용자가 슬라이더 트랙 안에서 사용 가능한 단일 값 또는 값 범위를 선택할 수 있게 해줘요. 슬라이더는 기본(default)과 범위(range)의 두 가지 변형으로 제공됩니다. 기본 슬라이더는 라벨과 슬라이더의 현재 선택 값을 표시하는 숫자 입력이 함께 제공돼요. 범위 슬라이더는 라벨과 슬라이더의 선택된 값 범위를 표시하는 두 개의 숫자 입력이 있습니다.
언제 사용할까요 (When to use)
- 단일 값 또는 숫자 값 범위를 선택할 때.
- 단일 값 또는 값 범위의 선택을 보여줘야 할 필요가 있을 때 슬라이더를 사용하세요.
- 다양한 옵션을 노출하거나 옵션 수를 빠르게 제한해야 할 때.
언제 사용하지 말아야 할까요 (When not to use)
- 예를 들어 1-1000처럼 극도로 큰 범위에는 사용하지 마세요.
- 예를 들어 1-3처럼 너무 작은 범위에는 사용하지 마세요.
- 숫자가 아닌 복잡한 입력 값에는 사용하지 마세요.
변형 (Variants)
| 변형 (Variant) | 용도 (Purpose) |
|---|---|
| Default slider | 기본 슬라이더는 사용자가 슬라이더 트랙 안에서 단일 값을 선택할 수 있게 함. |
| Range slider | 범위 슬라이더는 사용자가 슬라이더 트랙 안의 사전 정의된 범위에서 최소값과 최대값을 정의할 수 있게 함. |
포맷 (Formatting)
기본 슬라이더 구조 (Default slider anatomy)
- 라벨(Label): 슬라이더에서 어떤 종류의 값이 선택될지 설명하는 텍스트.
- 최소값(Min value): 슬라이더 범위에서 선택할 수 있는 최소값.
- 최대값(Max value): 슬라이더 범위에서 선택할 수 있는 최대값.
- 숫자 입력(Number input): 슬라이더 범위 안에서 선택된 값을 지정하는 입력.
- 핸들(Handle): 슬라이더 범위 안에서 트랙에서 움직여 선택 값을 지정할 수 있는 표시.
- 트랙(Track): 사용자가 선택할 수 있는 최소·최대 값을 범위에서 보여줘요.
범위 슬라이더 구조 (Range slider anatomy)
- 라벨(Label): 슬라이더에서 어떤 종류의 값이 선택될지 설명하는 텍스트.
- 최소값 숫자 입력(Min value number input): 슬라이더 범위 안에서 선택된 최소값을 지정하는 입력.
- 최대값 숫자 입력(Max value number input): 슬라이더 범위 안에서 선택된 최대값을 지정하는 입력.
- 최소값(Min value): 슬라이더 범위에서 선택할 수 있는 최소값.
- 최대값(Max value): 슬라이더 범위에서 선택할 수 있는 최대값.
- 핸들(Handles): 슬라이더 범위 안에서 트랙에서 움직여 선택된 최소·최대 값을 지정할 수 있는 두 개의 표시.
- 트랙(Track): 사용자가 선택할 수 있는 최소·최대 값을 범위에서 보여줘요.
콘텐츠 (Content)
주요 요소 (Main elements)
라벨 (Labels)
- 라벨은 사용자가 슬라이더에서 어떤 종류의 값(들)을 선택하는지 알려줘요.
- 라벨을 한 줄의 텍스트로 제한해 짧고 간결하게 유지하세요.
- 핸들과 상호작용할 때 라벨이 가려지지 않도록 라벨은 슬라이더 위에 배치해야 해요.
최소·최대 값 (Min and max values)
- 최소·최대 값 텍스트는 슬라이더의 최소·최대 값 범위를 나타내요.
- 최소·최대 값 텍스트는 핸들이나 숫자 입력을 사용한 사용자의 선택을 정확히 반영해야 해요.
수정 중인 값으로 슬라이더를 적절히 라벨링하세요.
이산적이지 않은 큰 증분을 초래하는 범위에는 사용하지 마세요.
동작 (Behaviors)
상태 (States)
기본과 범위 슬라이더는 enabled, hover, focus, active, error, warning, disabled, read-only, skeleton 상태가 있어요. 상태에 대한 자세한 내용은 스타일 탭의 인터랙션 상태(interactive state) 지침을 방문하세요.
| 상태 (State) | 언제 사용하나요 (When to use) |
|---|---|
| Enabled | 슬라이더가 활성화되어 있고 사용자가 직접 상호작용하지 않을 때. 활성 상태는 보통 컴포넌트의 기본 또는 정상 상태라고 함. |
| Hover | 사용자의 마우스 커서가 슬라이더 컴포넌트의 필드나 핸들 위에 있을 때. 슬라이더에 숫자 입력이 없어 선택 값을 표시하지 않는다면 호버 시 툴팁 사용. |
| Focus | 사용자가 필드나 핸들에 탭하거나 클릭하면 포커스되어, 사용자가 컴포넌트로 성공적으로 이동했음을 나타냄. 슬라이더에 숫자 입력이 없어 선택 값을 표시하지 않는다면 포커스 시 툴팁 사용. |
| Active | 사용자가 슬라이더 컴포넌트의 핸들을 누르고 상호작용하고 있을 때. 슬라이더에 숫자 입력이 없어 선택 값을 표시하지 않는다면 활성 시 툴팁 사용. |
| Error | "required"로 표시된 슬라이더 컴포넌트에서 옵션이 선택되지 않았거나, 선택 값이 범위를 벗어났거나, 값이 숫자가 아닐 때. 시스템 오류로 인해 발생할 수도 있음. 데이터를 제출·저장하기 전에 사용자 응답이 필요함. |
| Warning | 예외 조건에 사용자의 주의를 환기해야 할 때. 그 조건은 오류가 아닐 수 있지만 해결되지 않으면 문제를 일으킬 수 있음. |
| Disabled | 사용자가 컴포넌트와 상호작용할 수 없고 모든 인터랙티브 기능이 제거되었을 때. 읽기 전용 상태와 달리 비활성 상태는 포커스할 수 없고, 화면 판독기로 읽히지 않으며, 시각 대비를 통과할 필요가 없어 해석이 필요하면 접근성이 떨어짐. |
| Read-only | 사용자가 컴포넌트를 검토할 수 있지만 수정할 수 없을 때. 비활성 상태처럼 모든 인터랙티브 기능을 제거하지만 여전히 포커스 가능하고, 화면 판독기로 접근 가능하며, 가독성을 위해 시각 대비를 통과함. |
인터랙션 (Interactions)
마우스 (Mouse)
사용자는 가로 트랙의 아무 곳이나 클릭해 값 변경을 실행할 수 있어요. 사용자는 슬라이더 핸들도 드래그할 수 있습니다. 두 방법 모두 슬라이더를 재배치하고 단일 슬라이더의 숫자 입력 값을 자동으로 업데이트합니다. 사용자가 범위 슬라이더에서 클릭하는 위치에 따라 가장 가까운 값(최소 또는 최대)이 업데이트됩니다. 두 방법 모두 슬라이더를 재배치하고 숫자 입력 값을 자동으로 업데이트해요.
키보드 (기본 슬라이더) (Keyboard (default slider))
사용자는 숫자 입력 필드에 정확한 숫자 값을 입력하거나 up, down, left, right 화살표 키를 사용해 값을 변경할 수 있어요. 두 방법 모두 슬라이더 핸들을 해당 위치로 조정합니다.
사용자는 슬라이더가 포커스를 받을 때 화살표 키를 사용해 값을 증가시킬 수도 있어요. shift 키와 결합한 화살표 키는 stepMultiplier 값만큼 슬라이더를 바꿀 수 있습니다.
키보드 (범위 슬라이더) (Keyboard (range slider))
범위 슬라이더에 포커스가 설정되면 사용자는 다음으로 숫자 범위를 정의할 수 있어요:
- 텍스트 필드에 정확한 값을 입력.
- 마우스로 슬라이더 핸들을 움직여 숫자 입력 값을 자동으로 업데이트.
up,down,left,right화살표 키를 사용해 숫자 입력 값을 자동으로 업데이트하고 슬라이더 핸들을 해당 값으로 이동.- 단계 크기 증가분(step size increment)은 화살표 키를 사용할 때 입력된 값과 슬라이더 핸들이 얼마나 점프할지를 결정. 단계 크기 증가분을 합리적인 값으로 설정하세요.
Up,down,left,right화살표 키는 값을 한 단계 크기 증가분만큼 변경. 예:right화살표 키를 누르면 입력값이 59에서 60으로 1단위 증가.Shift +up,down,left,right화살표 키는 값을 10단계 크기씩 변경. 예:shift +right화살표 키를 누르면 값이 60에서 70으로 입력값이 10단위 증가.Home: 포커스가 선택기에 있을 때 첫 번째 범위 선택기 헤더로 포커스를 이동.End: 포커스가 선택기에 있을 때 마지막 범위 선택기 헤더로 포커스를 이동.
기본 슬라이더 (Default slider)
가장 기본적인 형태의 기본 슬라이더에는 라벨, 숫자 입력, 핸들이 있는 슬라이더 트랙이 함께 제공돼요. 사용자는 핸들이나 숫자 입력을 사용해 슬라이더 트랙 안에서 값을 선택할 수 있습니다. 슬라이더 트랙 안에서 범위를 선택해야 할 때는 범위 슬라이더를 대신 사용하세요.
컨텍스트 안의 기본 슬라이더 예시
범위 슬라이더 (Range slider)
범위 슬라이더는 사용자가 슬라이더 트랙에서 값 범위를 선택할 수 있게 해줘요. 범위 슬라이더는 라벨과 값을 입력할 두 개의 숫자 입력으로 구성되며, 이 값들이 슬라이더 트랙 안의 최소·최대 범위를 결정합니다. 사용자는 숫자 입력을 클릭하거나 슬라이더의 핸들을 움직여 최소·최대 값을 수동으로 입력할 수 있어요.
컨텍스트 안의 범위 슬라이더 예시
범위 값을 숫자로 설명하는 것이 모범 사례이며, 슬라이더를 날짜 선택기로 사용하지 마세요. 날짜를 선택하려면 날짜 선택기(date picker) 컴포넌트를 사용하세요.
범위를 숫자로 설명하세요.
날짜 선택기로 사용하지 마세요.
수정자 (Modifiers)
숫자 입력이 없는 슬라이더 (Sliders without a number input)
슬라이더에 선택 값을 표시할 숫자 입력이 없다면 호버, 포커스, 활성 시 툴팁을 사용해 선택 값을 보여주세요.
숫자 입력이 없을 때 툴팁으로 선택 값을 표시하기
사용자 정의 값이 있는 슬라이더 (Sliders with custom value)
사용자 정의 값이 있는 슬라이더의 경우 호버, 포커스, 활성 시 툴팁을 보여 선택 값을 표시하세요. 이 라벨은 사용 사례에 따라 달라질 수 있으며, 툴팁은 별도의 입력 없이 사용자가 자신의 선택을 이해하도록 도와야 해요.
예를 들어 low와 high 사이의 값에서, 핸들이 범위 시작 근처에 있으면 툴팁은 low를, 중간쯤이면 medium을, 끝에 가까워지면 high를 표시해야 해요.
툴팁으로 low, medium, high로 사용자 정의 값을 보여주는 예시
더 알아보기 (Learn more)
슬라이더는 값이나 값 범위를 시각적으로 조정할 수 있는 컴포넌트예요. 단일 값은 Default slider를, 최소·최대 범위는 Range slider를 쓰고, 핸들이나 숫자 입력으로 값을 조정하세요. 날짜 선택에는 사용하지 말고, 숫자 입력이 없는 경우 툴팁으로 선택 값을 알려주는 것이 좋습니다.