=============    HTML=============<div class="container">    <div class="row mb-4">        <div class="col-lg-12 mb-5">            <div id="slider1"></div>            <span class="example-val mt-4 d-inline-block" id="slider1-span"></span>        </div>    </div>    <br/>    <div class="row mb-0">        <div class="col-lg-12 mb-5">            <div id="slider2"></div>            <span class="example-val mt-4 d-inline-block" id="slider2-span"></span>        </div>    </div>    <div class="row">                                                      <div class="col-lg-12">            <button id="lockbutton" class="btn btn-primary mb-4" style="float: right; margin: 20px 0 0;">lock</button>        </div>    </div></div>

=============   Javascript=============    /*-----Locking sliders together-----*/// setting up button clicks// Store the locked state and slider values.var lockedState = false,    lockedSlider = false,    lockedValues = [60, 80],    slider1 = document.getElementById('slider1'),    slider2 = document.getElementById('slider2'),    lockButton = document.getElementById('lockbutton'),    slider1Value = document.getElementById('slider1-span'),    slider2Value = document.getElementById('slider2-span');// When the button is clicked, the locked// state is inverted.lockButton.addEventListener('click', function(){    lockedState = !lockedState;    this.textContent = lockedState ? 'unlock' : 'lock';});// cross updatingfunction crossUpdate ( value, slider ) {    // If the sliders aren't interlocked, don't    // cross-update.    if ( !lockedState ) return;    // Select whether to increase or decrease    // the other slider value.    var a = slider1 === slider ? 0 : 1, b = a ? 0 : 1;    // Offset the slider value.    value -= lockedValues[b] - lockedValues[a];    // Set the value    slider.noUiSlider.set(value);}// initializing sildersnoUiSlider.create(slider1, {    start: 60,    // Disable animation on value-setting,    // so the sliders respond immediately.    animate: false,    tooltips: true,    range: {        min: 50,        max: 100    }});noUiSlider.create(slider2, {    start: 80,    animate: false,    tooltips: true,    range: {        min: 50,        max: 100    }});slider1.noUiSlider.on('update', function( values, handle ){    slider1Value.innerHTML = values[handle];});slider2.noUiSlider.on('update', function( values, handle ){    slider2Value.innerHTML = values[handle];});// linking sliders togetherfunction setLockedValues ( ) {    lockedValues = [        Number(slider1.noUiSlider.get()),        Number(slider2.noUiSlider.get())    ];}slider1.noUiSlider.on('change', setLockedValues);slider2.noUiSlider.on('change', setLockedValues);// The value will be send to the other slider,// using a custom function as the serialization// method. The function uses the global 'lockedState'// variable to decide whether the other slider is updated.slider1.noUiSlider.on('slide', function( values, handle ){    crossUpdate(values[handle], slider2);});