의미와 단위를 기술하시오
정확한 입력이 필요한 경우에는 드래그만 하는 것이 아닌 추가 숫자박스가 있어야 합니다.
슬라이더 디자인 시스템
제어된 값이나 값 범위를 선택하는 데 도움이 됩니다.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
의미와 단위를 기술하시오
"예산, 천동": 범위 0~500, 현재 선택된 값은 250입니다.
변형 및 사용 사례
바 및 당김
트랙, 선택한 섹션, 핸들을 밝은 배경과 어두운 배경에서 쉽게 찾을 수 있도록 유지하세요.
가장 낮은 값과 가장 높은 값을 시도해 보십시오. 손잡이는 가장자리가 잘리지 않습니다.
예시 볼륨 막대에는 명확한 손잡이와 백분율 단위 레이블이 있습니다.
라벨 및 한도
드래그하기 전에 값의 의미, 단위, 최소/최대 표시를 지정하세요.
현재 값만 읽습니다. 가격인지, 거리인지, 용량인지 이해해야 합니다.
예시 거리 필터에는 "반경 5km 이내"라고 표시됩니다.
050100
당김 손잡이로 작동
드래그, 화살표 키 및 적절한 한도까지 이동 키를 지원합니다.
올바른 값을 선택하려면 키보드만 사용하십시오. 증가 또는 감소 단계는 일관되어야 합니다.
예시 화살은 매번 1%씩 증가합니다. 홈은 0%로 설정되어 있습니다.
드래그 대신 값을 입력할 수 있게 하세요.
드래그 위치의 값
핸들 근처에 값을 표시하는 경우 해당 값이 보이도록 유지하고 활성 항목을 가리지 마십시오.
모바일 상단 가장자리로 드래그하세요. 값 레이블은 뷰포트를 넘어 확장되지 않습니다.
예시 "75%" 버블은 당김 핸들 위에 있으며 오른쪽 가장자리에는 계속 표시됩니다.
숫자를 정확하게 입력하는 방법
드래그가 필요한 데이터에 대해 충분히 정확하지 않은 경우 입력 상자를 추가하십시오.
한도를 벗어난 숫자를 입력한 후 수정하세요. 슬라이더와 입력 상자는 동일한 유효한 값을 가져야 합니다.
예시 최대 가격을 올바른 표시로 드래그하는 대신 250000을 입력할 수 있습니다.