슬라이더(Slider)는 사용자가 값을 선택하거나 조절할 수 있는 가로 또는 세로 방향의 바 형태를 가지는 컴포넌트입니다. 슬라이더를 사용하면 사용자가 범위 내에서 값을 선택하거나 설정할 수 있습니다.
웹에서는 Range 타입의 인풋으로 사용됩니다.
사용 예시:
- 볼륨 조절: 음악 플레이어나 비디오 플레이어에서 사용자가 소리의 볼륨을 조절할 수 있는 슬라이더를 제공할 수 있습니다.
- 가격 선택: 상품 필터링이나 가격 범위 선택을 위해 사용자가 가격을 슬라이더로 조절하여 원하는 범위 내의 가격을 선택할 수 있습니다.
- 이미지 크기 조정: 이미지 갤러리에서 사용자가 이미지 크기를 슬라이더로 조절하여 확대 또는 축소할 수 있습니다.
주의할 점:
- 슬라이더는 사용자에게 값의 범위와 선택된 값의 상태를 시각적으로 표현해야 합니다. 사용자가 현재 선택된 값을 쉽게 알 수 있도록 표시해야 합니다.
- 슬라이더의 디자인은 사용자 경험과 일관성을 유지해야 합니다. 사용자가 슬라이더를 인식하고 조작하기 쉬워야 합니다.
- 슬라이더의 가용한 값 범위나 단계에 따라 적절한 레이블이나 표시가 필요할 수 있습니다. 이를 통해 사용자가 선택할 수 있는 값의 범위를 이해하고 원하는 값을 정확하게 선택할 수 있도록 도와줍니다.
- 모바일 환경에서는 터치 기반의 상호작용을 고려하여 슬라이더를 사용할 때 터치 스크롤 또는 드래그 제스처를 지원해야 합니다.
참조
https://developer.apple.com/design/human-interface-guidelines/sliders
https://m3.material.io/components/sliders/overview
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range