【JavaScriptライブラリ】noUiSliderの使い方

noUiSliderを使って開発をする機会があったので、メモしておく

const slider = document.getElementById('slider');
const btn = document.getElementById('btn');

        noUiSlider.create(slider, {
            start: [5, 95],
            step: 5,
            connect: [true, true, true], //3つの色を指定するため
            range: {
                'min': 0,
                'max': 100
            }
        });

        //クラスを３つ指定。CSSファイルで各クラスに色を指定する
        var connect = slider.querySelectorAll('.noUi-connect');
        var classes = ['c-1-color', 'c-2-color', 'c-3-color'];

        for (var i = 0; i < connect.length; i++) {
            connect[i].classList.add(classes[i]);
        }

        //レンジバーが調整されたかを見る。何も調整されなければ、ボタンはdisabledのままにする
        btn.disabled = true;
        const observer = new MutationObserver(records => {
            btn.classList.add('btn_red');
            btn.disabled = false;
        })
        observer.observe(slider, {
            childList: true,
            attributes: true,
            attributeFilter: ['class', 'style']
        })