<div class="range-figure">
    <span id="rangeSingle"></span>
</div>
<div class="range" data-range>
    <div class="range-area">
        <!-- 자동입력 -->
        <div class="range-wrap">
            <!-- value, min, max, step, data-range-unit만 설정해두면 됩니다. -->
            <input type="range" data-range-value="rangeSingle" value="20" min="0" max="100" step="10" data-range-unit="개">
        </div>
        <div class="range-bar" aria-hidden="true">
            <div class="range-fill"></div>
        </div>
    </div>
    <div class="range-bottom" aria-hidden="true">
        <span>0</span>
        <span>+100</span>
    </div>
</div>

data-range-multi="start || end" : 둘 다 존재해야함.

data-range-minstep="number" : 최소 간격

data-range-max="string" : 마지막에 표기할 단위

시점에 따른 이벤트

document.querySelectorAll('[data-range]').forEach(function(el) {
    // 싱글
    el.addEventListener('range.input', function(e) {
        console.log('single: ' + e.value);
    })
    // 멀티
    el.addEventListener('range.multi', function(e) {
        console.log(e.value);
    })
})

Component 호출(feat. 비동기)

const multiRangeEl = document.querySelector('[data-range]#multiRange');
const multiRange = new SKY.Range(multiRangeEl);