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 unconstrainedSlider2 = document.getElementById('unconstrained2');
var unconstrainedValues2 = document.getElementById('unconstrained-values2');
var value01html2 = document.getElementById('One2')
var value02html2 = document.getElementById('Two2')
var value03html2 = document.getElementById('Three2')
var value04html2 = document.getElementById('Four2')
var value05html2 = document.getElementById('Five2')


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

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

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


unconstrainedSlider2.noUiSlider.on('update', function (values) {
    // unconstrainedValues.innerHTML = values.join(' :: ');
    value01html2.innerHTML = "min - " + values[0];
    value02html2.innerHTML = values[0] + " - " + values[1];
    value03html2.innerHTML = values[1] + " - " + values[2];
    value04html2.innerHTML = values[2] + " - " + values[3];
    value05html2.innerHTML = values[3] + " - max";

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

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

 
      highlightEnergy();
}}
});