问题描述
如何使用 jquery ui 使一个滑块控制另一个滑块?我试图遵循 this tutorial,但“moveto”操作似乎太旧了,现在不起作用。我测试了下面的功能,它似乎不起作用,它一直重复最后一个功能。
<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);
}
解决方法
moveTo
确实已被弃用,但您仍然可以使用 value
方法来做本质上相同的事情:以编程方式为滑块设置一个值。请注意,如果您使用滑块,则应该使用滑块 - 并聆听此库引发的事件。例如:
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>