부트 스트랩 슬라이더에서 동일한 값을 가진 다른 슬라이더 슬라이더

Question

대출 생성기에 부트 스트랩 슬라이더 http://seiyria.com/bootstrap-slider/을 사용 중입니다. 여기에 문제 없습니다.

하지만 슬라이더가 맨 위와 다른 슬라이더 상자에 있어야합니다.이 슬라이더는 맨 위가 뷰포트 외부에있을 때 나타납니다.

내 질문은 가능하다면 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 기능을 결합하면 방금 변경 한 슬라이더를 기반으로 "기타"슬라이더의 새 값을 설정할 수 있습니다. 다음 예에서

는 I "는 바인더 제본"두 개의 슬라이더를 생성 (한 슬라이더의 각 변화가 동일한 값을 갖는 다른 슬라이더 강제)

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