# 네이티브 이중 범위 입력

> Clean Markdown view of GeekNews topic #18123. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=18123](https://news.hada.io/topic?id=18123)
- GeekNews Markdown: [https://news.hada.io/topic/18123.md](https://news.hada.io/topic/18123.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-12-06T10:00:27+09:00
- Updated: 2024-12-06T10:00:27+09:00
- Original source: [muffinman.io](https://muffinman.io/blog/native-dual-range-input/)
- Points: 2
- Comments: 1

## Topic Body

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

## Comments



### Comment 32073

- Author: neo
- Created: 2024-12-06T10:00:27+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42320516) 
- 슬라이더의 중간 부분은 항상 움직일 수 있어야 하며, Unity의 예시처럼 양쪽 핸들을 동시에 움직일 수 있어야 함
- 작성자는 자신의 생성적 그림을 위해 슬라이더를 만들었으며, 숫자를 입력하는 것보다 슬라이더를 드래그하여 이미지 변화를 보는 것을 선호함
- 슬라이더를 100-100으로 설정한 후 99-99로 변경할 수 없는 버그가 있으며, 이 문제는 슬라이더의 끝부분에서 쉽게 발생함
- HTML `<input type=range>`에 이중 값 구현이 필요하다고 생각하며, Firefox에서 핸들을 클릭할 때 값이 한 단계씩 변하는 버그가 있음
- 회사 디자인 시스템에서 인턴이 유사한 POC를 만들었으나, 입력값이 튀는 문제가 발생하여 다른 인턴이 겹치는 입력 범위로 해결책을 제시함
- "네이티브"라는 용어는 논의의 여지가 있으며, 자바스크립트가 필요하면 더 이상 네이티브가 아니라고 생각함
- 특정 기능을 구현하기 위해 React를 사용했으나, 프론트엔드 개발에 서툴러 어려움을 겪음
- jQuery UI 슬라이더를 사용했으나, 단일 슬라이더를 위해 jQuery와 jQuery UI를 추가해야 했음
- 자바스크립트 없이도 작동할 수 있으며, CSS의 너비 계산을 슬라이더 값에 의존하도록 더 정교하게 만들면 됨
- 버그 보고에 적절한 장소인지 의문이며, 첫 두 예시의 핸들이 터치 상호작용을 가로막아 스크롤을 방해하는 문제가 있음