- @stanko/dual-range-input은 두 개의 네이티브 HTML 범위 입력을 사용하는 네이티브 듀얼 범위 입력 라이브러리임.
- 네이티브 입력을 사용하여 모든 기본 상호작용 및 접근성 기능을 유지함.
- 약 50줄의 JavaScript와 CSS로 구성되어 있음.
-
왜 필요한가
- 생성적 드로잉 도구에서 매개변수를 조정하기 위한 UI를 사용하며, 최소 및 최대 슬라이더가 필요함.
- 기존 솔루션은 JavaScript에 의존하며 드래그 및 접근성 기능을 재구현함.
- 네이티브 HTML 범위 입력을 사용하고, 트랙을 클릭하면 가까운 슬라이더가 해당 값으로 이동해야 함.
-
작동 원리
- 두 개의 입력이 나란히 배치되어 있으며, 입력이 변경되면 두 값의 중간점을 계산함.
- 최소 및 최대 속성을 중간점으로 설정하고, 입력의 너비를 업데이트함.
-
입력 크기 조정
- 입력의 너비를 계산할 때 트랙이 실제 입력 너비보다 짧다는 점을 고려해야 함.
- 입력의 너비에 엄지 너비를 추가하여 간단하게 계산함.
- 입력 래퍼에 패딩을 추가하여 엄지의 추가 너비를 수용함.
-
클릭 시 엄지 이동
- 입력이 중간점에서 만나도록 크기가 조정되며, 클릭 시 가까운 엄지가 해당 값으로 이동함.
- 디버그 모드를 켜면 중간점을 쉽게 볼 수 있음.
-
스타일링
- CSS를 사용하여 범위 입력을 스타일링할 수 있음.
- 트랙과 엄지의 스타일링이 간단하며, 트랙의 중간 연결 부분에 경계 반경을 제거함.
-
테마
- 테마를 쉽게 변경할 수 있도록 여러 변수를 노출함.
- 기본값을 제공하며, 변수를 재정의하여 테마를 생성할 수 있음.
-
그라디언트
- CSS 그라디언트를 사용하여 선택된 범위를 페인트함.
- --dri-gradient-position 변수를 사용하여 그라디언트를 설정하고, 코드에서 너비와 함께 업데이트함.
-
결론
- 이 게시물은 생각을 정리하기 위한 것이며, 네이티브 요소를 사용해보도록 영감을 주기를 바람.