[해피CGI][cgimall] CircularRange Slider

CircularRange 소개

CircularRange는 게이지, 스피드미터, 온도계 등
각종 원형(라디얼) 입력 컨트롤을 구현할 수 있도록 제작된 가볍고 간단한 웹 컴포넌트 기반 원형 슬라이더입니다.
사용자는 슬라이더의 스타일과 형태를 자유롭게 커스터마이징할 수 있어, 다양한 UI에 손쉽게 적용할 수 있습니다.

 

 

주요 기능

 

1. 접근성(Accessibility) 지원

• ARIA 속성 기본 탑재
• 방향키로 조절 가능한 키보드 네비게이션
• 스크린 리더 호환을 위한 포커스 관리 포함
   

2. CSS 커스텀 프로퍼티 테마 지원

• 트랙(track), 채움(fill), 손잡이(thumb), 눈금(index), 레이블 등
  20개 이상의 CSS 변수 제공
• CSS 변수만으로 간편하게 디자인 변경 가능
   

3. 유연한 원호(Arc) 설정

• 정원(전체 원형), 반원, 사용자 지정 각도 범위 모두 지원
• 시작 각도(start-angle), 종료 각도(end-angle)로 원하는 형태 구성
• 필요 시 역방향(reverse direction) 설정 가능
   

4. Form 자동 연동

• ElementInternals API를 사용해 HTML form 요소와 자연스럽게 연결
• 기본 input 요소처럼 value 전달 및 제출 가능
   

5. 성능 최적화

• CSS conic-gradient와 offset-path를 활용한 부드러운 렌더링
• 모바일 환경에서 스크롤 간섭을 방지하는 touch-action 제어 적용
• 가볍고 반응성 좋은 퍼포먼스 제공

 

CircularRange가 필요한 UI 구현에 도움이 되길 바랍니다.

더 다양한 웹 컴포넌트를 함께 활용하여, 더욱 편리하고 완성도 높은 프로젝트를 만드실 수 있습니다.

읽어주셔서 감사합니다. 😊