jQuery滑块-同时移动滑块

我有三个滑块，如下所示：-

<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div>
<div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div> 
<div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div> 


$('.slider').each(function() {
    var $el = $(this);
    $el.slider({
        range: "max",
        min: $el.data('min'),
        max: $el.data('max'),
        value: $el.data('value'),
        step: $el.data('step'),
        slide: function(event, ui) {
            $($el.data('target')).html('£' + ui.value);

            // place code here which will execute when *any* slider moves
        }
    });
});

$（'.slider'）。每个（函数（）{
var$el=$（本）；
$el.slider({
射程：“最大”，
最小值：$el.数据（'min'），
最大值：$el.data（'max'），
值：$el.data（'value'），
步骤：$el.data（'step'），
幻灯片：功能（事件、用户界面）{
$（$el.data（'target'））.html（'镑'+ui.value）；
//将代码放在此处，当*任意*滑块移动时将执行该代码
}
});
});

我想做的是，无论使用哪个滑块，它们都会同时增加

所有三个滑块都有不同的增量，因此它们需要相应地更新

任何帮助都将不胜感激

---

以下是使用

停止

和

更改

事件的一种方法：-

$('.slider').each(function() {
  var $el = $(this);
  $el.slider({
    range: "max",
    min: $el.data('min'),
    max: $el.data('max'),
    value: $el.data('value'),
    step: $el.data('step'),
    stop: function(event, ui) {
      var percent = (100 / ($(this).data('max') - $(this).data('min'))) * $(this).slider('value');
      $('.slider').not(this).each(function() {
        $(this).slider('value', (($(this).data('max') - $(this).data('min')) / 100) * percent);
      });
    },
    change: function(event, ui) {
      $($el.data('target')).html('£' + ui.value);
    }
  });
});

---

根据BG101的回答，这是最终结果：-

jQuery('.slider').each(function() {
    var $el = jQuery(this);
    $el.slider({
        range: "max",
        min: $el.data('min'),
        max: $el.data('max'),
        value: $el.data('value'),
        step: $el.data('step'),
        slide: function(event, ui) {
            var percent = (100 / (jQuery(this).data('max') - jQuery(this).data('min'))) * jQuery(this).slider('value');

            jQuery('.slider').not(this).each(function() {
                jQuery(this).slider(
                    'value', 
                    ((jQuery(this).data('max') - jQuery(this).data('min')) / 100) * percent
                );
            });
            jQuery('.slider').each(function() {
                var thisTarget = jQuery(this).data('target');
                var thisValue = jQuery(this).slider('option','value');

                jQuery(thisTarget+' span').html(thisValue);
            });

        },
    });
});

---

（我只是想分享一下）

如果你关心增量，为什么增量中没有初始值？ie

3848

不是介于

3800

和

30000

之间的500增量？因为它们有不同的步骤/值，所以您应该有一个必须遵循的规则。你有什么样的规则，假设第一个滑块在4300上，那么其他两个呢？