Слайд-слайдер на другом с одинаковыми значениями на слайдере загрузки

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, '$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 box, ползунок сверху, также будет иметь новые значения и просмотр слайдера, как если бы пользователь скользил по нему.

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>