============= 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 ============= // 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 updating function 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 silders noUiSlider.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 together function 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)});