개요

단일/듀얼 슬라이더로 값을 선택하며, CSS 변수로 트랙/손잡이 높이/오프셋을 조정합니다.

단일 슬라이더

<div class="dewp-range">
  <label class="dewp-range-label">값: <span>50</span></label>
  <div class="dewp-range-track" style="--dewp-track-size:4px; --dewp-thumb-size:18px; --dewp-thumb-shift-y:0px;">
    <input type="range" min="0" max="100" value="50">
  </div>
</div>
        

듀얼 슬라이더

<div class="dewp-range dewp-range--dual" style="--dewp-track-size:4px; --dewp-thumb-size:18px;">
  <label class="dewp-range-label">범위: <span>20–80</span></label>
  <div class="dewp-range-dual-wrap">
    <input type="range" min="0" max="100" value="20">
    <input type="range" min="0" max="100" value="80">
  </div>
</div>
        

동적 표시

wrap.style.setProperty('--dewp-range-start', a + '%');
wrap.style.setProperty('--dewp-range-end', b + '%');
        

CSS 변수

• --dewp-track-size: 트랙 두께
• --dewp-thumb-size: 손잡이 크기
• --dewp-thumb-shift-y: 수직 보정