如何根据中间值改变noUiSliders的颜色

Question

如何更改noUiSliders中间的颜色？

用户将从0向左或向右拖动。

Codepen Link

function filter500( value, type ){
    return value % 1000 ? 2 : 1;
}

    var slider = document.getElementById('range');

    noUiSlider.create(slider, {
    start: [ 0 ],
    step: 500,
    connect: [true, true],
    range: {
        'min': [ -5000 ],
        'max': [ 5000 ]
    },
    pips: {
        mode: 'steps',
        stepped: true,
        density: 4,
        filter: filter500,
        format: wNumb({
            decimals: 0,
            //prefix: '£',
            negative: '',
        })
    }
});

    var connect = slider.querySelectorAll('.noUi-connect');
var classes = ['c-1-color', 'c-2-color'];

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


var data_value = document.getElementById('data_value');
slider.noUiSlider.on('update', function ( values, handle ) {
    data_value.innerHTML = values[handle];

});

// Read the slider value.
document.getElementById('read-button').addEventListener('click', function(){
    alert( slider.noUiSlider.get() );
    slider.setAttribute('disabled', true);
});

因此，如果用户从中间向左移动光标，则需要更改从中间到拖动部分的颜色。任何线索都非常感谢。

Answer 1

你想要这样的东西吗？ enter link description here

       .c-1-color { background: red; }
       .c-2-color { background: green; }