웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 동기화된 입력을 제공하는 jQuery 범위 슬라이더 플러그인 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] 동기화된 입력을 제공하는 jQuery 범위 슬라이더 플러그인

해피CGI윤실장 2025. 6. 12. 09:05

- 소개

동기화된 입력 필드로 듀얼 핸들 범위 선택을 지원하는 가벼운 jQuery 범위 슬라이더 플러그인입니다. 1.34KB에 불과한 이 플러그인은 웹 애플리케이션의 정밀한 범위 제어를 구현합니다.

범위 슬라이더를 사용하면 핸들을 드래그하거나 입력 필드를 통해 값 범위를 선택할 수 있습니다. 핸들은 동적 으로 업데이트되고 , 범위 막대는 선택한 값을 반영합니다. 입력 필드는 슬라이더 이동과 동기화되는 동시에 수동 입력도 가능합니다.





- 라이센스

MIT





- 사용 방법

1. 트랙, 범위 막대, 핸들을 사용하여 범위 슬라이더 컨테이너를 만듭니다.





2. 수동 조정을 위한 입력 필드를 만듭니다.





3. 
문서에 필요한 jQuery JavaScript 라이브러리를 로드합니다.





4. 
jQuery 다음에 범위 슬라이더의 메인 스크립트를 로드합니다.






5. 시각적 표현에 필요한 스타일을 추가합니다.








- 작동 화면

 

Comments