How to synchronize the work of multiple range slider?

  • 0
    Hello. There are several rangeslider. Plugin link: https://github.com/andreruffert/rangeslider.js
    In the 1st slider, values ​​from 1 to 100
    In the 2nd slider, the values ​​are from 1 to 100, but the maximum value should not exceed the current value from the 1st slider. Those. if 50 is currently selected in the 1st slider, before in the 2nd slider all values ​​should be in the range of 1-50.
    Also in the 2nd slider, the value from the 1st slider is displayed as a percentage.
    My code: https://codepen.io/TuMko/pen/PozRJwW
    I realized the interest. Please tell me how to implement the rest of the functionality. I don’t understand how to pull out the current value of a certain slider and pass it to the attributes of another.
    JavaScript Kaleb Walsh, Apr 23, 2019

  • 1 Answers
  • 0
    Replace calc__price and calc__payment classes with generic calc .



    const $price = $('#price');
    const $firstPayment = $('#first-payment');

    function update($elem) {
    $elem.closest('.calc').find('output').text($elem.val());
    $('.payment-percent').html(Math.round($firstPayment.val() * 100 / $price.val()) + '%');
    }


    $price.closest('.calc').on('input', function() {
    const val = $price.val();

    $firstPayment
    .val((i, v) => Math.min(v, val))
    .attr('max', val)
    .rangeslider('update', true);

    update($firstPayment);
    });

    $price.add($firstPayment)
    .rangeslider({ polyfill: false })
    .closest('.calc')
    .on('input', e => update($(e.target)))
    .end()
    .trigger('input');
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!