将一个滑块移动到另一个滑块。 jQueryUI答案

【问题标题】：Move one slider around another. JqueryUi将一个滑块移动到另一个滑块。 jQueryUI
【发布时间】：2021-09-15 12:50:26
【问题描述】：

如何使用 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);
}

【问题讨论】：

标签： jquery-ui slider

【解决方案1】：

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>

【讨论】：