Slide same slider on another with identical values on bootstrap slider

Question

I am using bootstrap slider http://seiyria.com/bootstrap-slider/ for a loan generator. No problem here.

But I have to identical sliders, one at the top and the other in a SlideIn box, that will appear when the top is out of the viewport.

My question is if is possible that if I use the slider of SlideSide it will also move the slider and set the new value on SlideTop ( as if I did slide it with the mouse).

I have for the top slider

$("#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);

    });

My idea is something like

$("#amount").on("slide", function () {

    //Move slider on the amountSide and set the new value

});

The idea is that if the user is using the slider in the SlideIn and for some reason close the SlideIn box, the slider on the top, will also have the new values and viewing the slider as if the user did slide it.

Answer 1

You can combine the slide event of the slider and the data('slider').setValue function to set the new value of the "other" slider based on the slider that was just changed.

In the following example I created two sliders that are "binded" (each change in one slider will force the other slider to have the same value):

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