Как синхронизировать работу нескольких range slider?

Question

[TuMko]

Здравствуйте. Есть несколько rangeslider. Ссылка на сам плагин: https://github.com/andreruffert/rangeslider.js
В 1м слайдере значения от 1 до 100
Во 2м слайдере значения от 1 до 100, но при этом максимальное значение не должно превышать текущее значение из 1го слайдера. Т.е. если в 1м слайдере на данный момент выбрано значение 50, до во 2м слайдере все значения должны быть в диапазоне 1-50.
Так же во 2м слайдере отображается в процентах значение от 1го слайдера.
Мой код: https://codepen.io/TuMko/pen/PozRJwW
Проценты реализовал. Подскажите пожалуйста, как реализовать остальной функционал. Не пойму, как вытянуть текущее значение определенного слайдера и передать в атрибуты другого.

Answer 1

[0xD34F]

Классы calc__price и calc__payment заменить на общий 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');

Comments

[TuMko]

Спасибо!