在引導滑塊上使用相同值將另一個滑塊滑動到另一個滑塊上

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>