=============
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 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);
});