在引导滑块上使用相同值将另一个滑块滑动到另一个滑块上

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>