범위 슬라이더

range-slider는 min/max 두 개의 드래그 가능한 썸을 가진 범위 선택 슬라이더 웹 컴포넌트입니다. Shadow DOM을 사용하며, 접근성을 위해 aria-label 지정을 권장합니다.

기본 사용법

<script type="module">
  if (!window.customElements.get("range-slider")) {
    import("/ui/element/range-slider.js");
  }
</script>

<range-slider
  min="0"
  max="100"
  step="1"
  min-value="20"
  max-value="80"
  unit="cm"
  aria-label="가격 범위"
></range-slider>

<script>
  const slider = document.querySelector("range-slider");
  slider.addEventListener("rangechange", (e) => {
    console.log("Range changed:", e.detail);
  });
</script>

속성 (Attributes)

속성	타입	기본값	설명
min	Number	0	범위 최솟값
max	Number	100	범위 최댓값
step	Number	1	증감 단위
min-value	Number	—	왼쪽 썸 현재 값
max-value	Number	—	오른쪽 썸 현재 값
unit	String	""	값 뒤에 붙일 단위 문자열
drag-class	String	"v-range-slider--dragging"	드래그 중 호스트에 붙을 클래스
disabled	Boolean	false	비활성화 여부

aria-label을 지정하면 스크린 리더에 범위 의미를 전달할 수 있습니다.

이벤트

이벤트	설명	detail
rangechange	값이 변경되고 커밋될 때	{ minValue: number | null, maxValue: number | null }
minchange	min-value가 변경될 때	{ value: number }
maxchange	max-value가 변경될 때	{ value: number }
rangefocus	썸이 포커스를 받을 때	{ thumb: 'min' | 'max' }
rangeblur	썸이 포커스를 잃을 때	{ thumb: 'min' | 'max' }

프로퍼티

• minValue / maxValue: get/set — 현재 썸 값
• unit: get — 단위 문자열
• dragClass: get — 드래그 중 적용 클래스명

CSS 변수

스타일 조정: --v-range-slider-thumb-size, --v-range-slider-track-height 등.