在另一个滑块上滑动相同的滑块，在引导滑块上具有相同的值

Question

我正在使用引导滑块 http://seiyria.com/bootstrap-slider/ 作为贷款生成器。这里没问题。

但我必须使用相同的滑块，一个在顶部，另一个在 SlideIn 框中，当顶部超出视口时会出现。

我的问题是，如果我使用SlideSide 的滑块，它是否可能也会移动滑块并在SlideTop 上设置新值（就像我用鼠标滑动它一样）。

我有顶部滑块

$("#amount").on("slide", function () {
        var amountNumber = $('#amount').val();
        var amountStr = function (nStr) {
            nStr = amountNumber;
            x = nStr.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';

            var rgx = /(\d+)(\d{3})/;

            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + '.' + '$2');
            }
            return x1 + x2 + " kr.";
        }

        var src = illustrationSource.concat(amountNumber.substring(0, 1) + ".svg");
        illustrationWrapper.find("img").attr("src", src);

    });

我的想法是这样的

$("#amount").on("slide", function () {

    //Move slider on the amountSide and set the new value

});

这个想法是，如果用户正在使用 SlideIn 中的滑块并且由于某种原因关闭了 SlideIn 框，则顶部的滑块也将具有新值，并且可以像用户滑动一样查看滑块。

Answer 1

您可以结合滑块的slide事件和data('slider').setValue函数，根据刚刚更改的滑块设置“其他”滑块的新值。

在以下示例中，我创建了两个“绑定”的滑块（一个滑块的每次更改都会强制另一个滑块具有相同的值）：

$(function() {
  $('#ex1').slider({
    formatter: function(value) {
      return 'Current value: ' + value;
    }
  }).on('slide', function(e) {
    $('#ex2').data('slider').setValue(e.value)
  });
  $('#ex2').slider({
    formatter: function(value) {
      return 'Current value: ' + value;
    }
  }).on('slide', function(e) {
    $('#ex1').data('slider').setValue(e.value)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css" />

<br /><br />
<div class="container">
  <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="0" />
  <br />
  <br />
  <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="0" />
</div>