Проходите по классу и создавайте noUisliders - PullRequest
Новая
       7

Проходите по классу и создавайте noUisliders

0 голосов
/ 24 сентября 2018

У меня есть некоторый код, который проходит через класс и делает для каждого класса noUiSlider.

Я пытаюсь сделать так, чтобы значения ползунка noUi были активными (заданное значение), но он не работает,У меня работает только последний слайдер.

javascript: 

var sliders = $('.create-sliders');
for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: [ 0 ],
        range: {
            // start at 0 and end at 1000
            min: 0,
            max: 180
        },
        behaviour: 'snap',  
        connect: [true, false],
        //set values that are clickable
        pips: { mode: 'values', values: [0, 30, 60, 90, 120, 150, 180] 
        },
    });
    sliders[i].noUiSlider.on('slide', addValues);
    let values = sliders[i].getElementsByClassName('noUi-value');
    for(let val of values){
        var testSlider = sliders[i];
        val.pip = val.innerHTML;
        val.style.cursor = 'pointer';
        val.onclick = (e) => {
            testSlider.noUiSlider.set(val.pip);
        }
    }
}

function addValues(){
    var allValues = [];
}

HTML: 

<div class="create-sliders"></div> 
<div class="create-sliders"></div> 
<div class="create-sliders"></div>

1 Ответ

0 голосов
/ 24 сентября 2018

Я немного изменяю ваш JS код и добавляю стиль, чтобы получить курсор. 

var sliders = $('.create-sliders');
for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: [ 0 ],
        range: {
            // start at 0 and end at 1000
            min: 0,
            max: 180
        },
        behaviour: 'snap',  
        connect: [true, false],
        //set values that are clickable
        pips: { mode: 'values', values: [0, 30, 60, 90, 120, 150, 180] 
        },
    });
    sliders[i].noUiSlider.on('slide', addValues);

}

$('.noUi-value').click(function(){
      var selectedSliderIndex = $(this).parents('.create-sliders').index();
    var value = Number($(this).data('value'));
    sliders[selectedSliderIndex].noUiSlider.set(value);
});

function addValues(){
    var allValues = [];
}

проверьте это fiddle для рабочего примера.

...