Loop through class and create noUisliders

Question

I have some code that loops through a class and makes for each class a noUiSlider.

I am trying to make the value's of the noUi slider clickable (set value), but its not working, I only get the last slider working.

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>

check my answer and if that solve your problem, make sure to mark it as answer. — SilentCoder
Wel @SilentCoder i tried your solution, but iam getting the next error: Uncaught TypeError: Cannot read property 'noUiSlider' of undefined — Hani Taher
where you getting the error ? in which line ? did you check my fiddle link ? — SilentCoder
@SilentCoder yes i did! I just get the error when i click on a value: main.js:276 Uncaught TypeError: Cannot read property 'noUiSlider' of undefined at HTMLDivElement.<anonymous> (main.js:276) at HTMLDivElement.dispatch (jquery.min.js:2) at HTMLDivElement.y.handle (jquery.min.js:2) — Hani Taher

SilentCoder SilentCoder · Accepted Answer · 2018-09-24T15:49:33

I changes your JS code little bit and add style to get cursor.

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 = [];
}

check this fiddle for working example.

Loop through class and create noUisliders

1 Answers