slider.js

var unconstrainedSlider = document.getElementById('unconstrained');
var unconstrainedValues = document.getElementById('unconstrained-values');
var value01html = document.getElementById('One')
var value02html = document.getElementById('Two')
var value03html = document.getElementById('Three')
var value04html = document.getElementById('Four')
var value05html = document.getElementById('Five')

noUiSlider.create(unconstrainedSlider, {
    start: [100, 200, 300, 400],
    // behaviour: 'unconstrained-tap',
    connect: [true, true, true, true, true],
    range: {
        'min': 0,
        'max': 500
    }
});

var connect = unconstrainedSlider.querySelectorAll('.noUi-connect');
var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];

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


unconstrainedSlider.noUiSlider.on('update', function (values) {
    // unconstrainedValues.innerHTML = values.join(' :: ');
    value01html.innerHTML = "min - " + values[0];
    value02html.innerHTML = values[0] + " - " + values[1];
    value03html.innerHTML = values[1] + " - " + values[2];
    value04html.innerHTML = values[2] + " - " + values[3];
    value05html.innerHTML = values[3] + " - max";

    var chk_ceil= document.getElementById("chxboxDemand");
    if (typeof chk_ceil === 'undefined'|| chk_ceil === null) {
        // the variable is defined
}else{
    if(chk_ceil.checked == true){

        heatdemVal01 = values[0];
        heatdemVal02 = values[1];
        heatdemVal03 = values[2];
        heatdemVal04 = values[3];

 
      highlightEnergy();
}}
});

// var testingslider = document.getElementById('slider-color');

// noUiSlider.create(testingslider, {
//     start: slidervalues = [60, 100, 200, 300],
//     connect: [true, true, true, true, true],
//     range: {
//         'min': [0],
//         'max': [600]
//     }
// });

// var connect = testingslider.querySelectorAll('.noUi-connect');
// var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];

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


// function checkSlider(){

// }
// // Display the slider value and how far the handle moved
// // from the left edge of the slider.
// range.noUiSlider.on('update', function (values) {
//     // valuesDivs[handle].innerHTML = values[handle];
//     // diffDivs[0].innerHTML = values[1] - values[0];
//     // diffDivs[1].innerHTML = values[2] - values[1];
//     // diffDivs[2].innerHTML = values[3] - values[2];
//     alert(values[0])
// });