Move one slider around another. JqueryUi - jquery-ui

Question

How to make one slider control another using jquery ui? I tried to follow this tutorial, but 'moveTo' action seems to be too old and doesn't work nowadays. I tested the function below and it doesn't seem to work, it keeps repeating one last function.
<div id="slider-1" class="slider-range" onclick="move()"></div>
<div id="slider-2" class="slider-range"></div>
function moveSlider2(e, ui) {
jQuery('#slider-2').slider('value', ui.value);
}

Answer 1

moveTo was deprecated indeed, but you can still use value method to do essentially the same thing: set a value for a slider programmatically. Note that if you work with sliders, you should work with sliders - and listen to the events raised by this library. For example:
const sliders = ['#slider-1', '#slider-2', '#slider-3'].map(
selector => $(selector).slider({
min: 1,
max: 5,
step: 0.1
})
);
sliders.forEach($el => {
// listening to `slide` event, fired when value is changed by a user
$el.on('slide', (_, {value}) => {
sliders.forEach($slider => $slider.slider('value', value));
});
});
.slider-range {
width: 50%;
margin: 5%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider-1" class="slider-range"></div>
<div id="slider-2" class="slider-range"></div>
<div id="slider-3" class="slider-range"></div>