[rangeslider.js] 범위 선택 바 만들기

<span class="example-val" id="skip-value-lower"></span> ~ <span class="example-val" id="skip-value-upper"></span>
<div id="rangeSlider"></div>



var rangeSlider = document.getElementById('rangeSlider');

noUiSlider.create(rangeSlider, {
    start: [0, 500000],
    step: 10000,
    connect: true,
    range: {
        'min': [ 0 ],
        'max': [ 500000 ]
    },
    format: wNumb({
        decimals: 0,
        thousand: ','
    })
});

var skipValues = [
  document.getElementById('skip-value-lower'),
  document.getElementById('skip-value-upper')
];

rangeSlider.noUiSlider.on('update', function( values, handle ) {
	skipValues[handle].innerHTML = values[handle];
});

https://rangeslider.js.org/

nouislider.css

0.02MB

nouislider.js

0.07MB