在 bootstrap 滑块上将相同的滑块滑动到另一个具有相同值的滑块上

Question

我正在使用 bootstrap 滑块 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, '' + '.' + '');
            }
            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函数，根据刚刚改变的滑块设置"other"滑块的新值。

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

$(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>

在 bootstrap 滑块上将相同的滑块滑动到另一个具有相同值的滑块上

Slide same slider on another with identical values on bootstrap slider

javascript

jquery

slider

twitter-bootstrap

bootstrap-slider