Modifying jquery NoUiSlider to lock dynamically multiple sliders of a certain class

Question

I am trying to find a modification to lock various sliders (noUiSliders) of class "active" together, which will be added or removed dynamically.

How can I modify the script to make it lock only sliders with the class "active" at a time, based (or not) on the method provided on the script authors page?

The following example locks only the two first sliders regardless to the class "active":

http://jsfiddle.net/qtzwyqke/8/

<div class="example">
    <div class="slider" id="slider1"></div> <span class="example-val" id="slider1-span"></span>

    <div class="slider active" id="slider2"></div>  <span class="example-val" id="slider2-span"></span>

    <div class="slider active" id="slider3"></div>  <span class="example-val" id="slider3-span"></span>

    <div class="slider active" id="slider4"></div>  <span class="example-val" id="slider4-span"></span>
    <button style="float:right;margin:20px 0 0">Lock</button>
</div>

<script>

var lockedState = false,
    values = [60, 80, 70, 50],
    slider1 = $("#slider1"),
    slider2 = $("#slider2"),
    slider3 = $("#slider3"),
    slider4 = $("#slider4");

$("button").click(function () {
    lockedState = !lockedState;
    $(this).text(lockedState ? 'unlock' : 'lock');
});

function crossUpdate(value, handle, slider) {

    if (!lockedState) return;

    var lValue = slider1.is(slider) ? 1 : 0,
        hValue = lValue ? 0 : 1;

    value -= (values[hValue] - values[lValue]);

    $(this).val(value);
}

slider1.noUiSlider({
    start: 60,

    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

slider2.noUiSlider({
    start: 80,
    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

slider3.noUiSlider({
    start: 70,
    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

slider4.noUiSlider({
    start: 50,
    animate: false,
    range: {
        min: 0,
        max: 100
    }
});

$(".slider").on('set', function () {

    values = [
    Number(slider1.val()),
    Number(slider2.val()),
    Number(slider3.val()),
    Number(slider4.val())];
});

slider1.Link('lower').to(slider2, crossUpdate);
slider1.Link('lower').to($("#slider1-span"));

slider2.Link('lower').to(slider1, crossUpdate);
slider2.Link('lower').to($("#slider2-span"));

slider3.Link('lower').to($("#slider3-span"));
slider4.Link('lower').to($("#slider4-span"));

</script>