<div class="container">
  <div class="loan-calculator">
    <div class="loan-calculator__controls-list">
      <div class="loan-calculator__control loan-calculator-control">
        <span class="loan-calculator-control__caption">Я хочу занять: <b><span data-money-range-value>120 000</span> ₽</b></span>
        <div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--money" data-money-range-slider></div>
        <div class="loan-calculator-control__help-values">
          <div class="loan-calculator-control__min-value">30 000 ₽</div>
          <div class="loan-calculator-control__max-value">5 000 000 ₽</div>
        </div>
      </div>
      <div class="loan-calculator__control loan-calculator-control">
        <span class="loan-calculator-control__caption">На срок: <b><span data-months-range-value>3</span> <span data-months-range-measure>месяца</span></b></span>
        <div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--months" data-months-range-slider></div>
        <div class="loan-calculator-control__help-values">
          <div class="loan-calculator-control__min-value">1 месяц</div>
          <div class="loan-calculator-control__max-value">36 месяцев</div>
        </div>
      </div>
    </div>
    <div class="loan-calculator__result loan-calculator-result">
      <span class="loan-calculator-result__caption">Ежемесячный платеж:</span>
      <b class="loan-calculator-result__value"><span data-result-value>45 000</span> ₽</b>
    </div>
    <p class="loan-calculator__footnote"><small>Условия выдачи займа могут отличаться, исходя из анализа документов и состояния вашего автомобиля</small></p>
  </div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "Open Sans", sans-serif;
  background-color: transparent; /* Change background to transparent */
}

.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Стили компонента */

/* Стили для слайдера */
.loan-calculator-range-slider {
  height: 4px;
  background-color: #e8e8e8;
  border: none;

  .noUi-handle {
    right: -8px !important;
    width: 16px;
    height: 16px;
    box-shadow: none;
    border: 2px solid #ff0000; /* Change handle color to red */
    border-radius: 50%;
    outline: none;
    box-sizing: border-box;

    &::before,
    &::after {
      content: none;
    }
  }

  &--money {
    .noUi-connect {
      background-color: #4cca4c; /* Зеленый цвет для слайдера суммы денег */
    }

    .noUi-handle {
      border-color: #ff0000; /* Change handle color to red */
    }
  }

  &--months {
    .noUi-connect {
      background-color: #412abd; /* Синий цвет для слайдера месяцев */
    }
    .noUi-handle {
      border-color: #ff0000; /* Change handle color to red */
    }
  }
}

/* Стили для результата */
.loan-calculator-result {
  font-size: 18px;
  line-height: 1.25;
}

.loan-calculator-result__caption {
  display: block;
}

.loan-calculator-result__value {
  display: inline-block;
  font-size: calc(32 / 18 * 1em);
  color: #4cca4c; /* Зеленый цвет для ежемесячного платежа */

  &::after {
    content: "*";
    display: inline-block;
    margin-left: 8px;
    vertical-align: top;
    font-size: 16px;
    color: #ff5555;
  }
}

/* Стили для основного контейнера калькулятора */
.loan-calculator {
  max-width: 376px;
  padding: 28px;
  background-color: #ffffff;
  border-radius: 8px;
}

.loan-calculator__controls-list {
  margin-bottom: 32px;

  & > :last-child {
    margin-bottom: 0;
  }
}

.loan-calculator__control {
  margin-bottom: 24px;
}

/* Стили для контрола */
.loan-calculator-control {
}

.loan-calculator-control__caption {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: calc(22 / 18);
}

.loan-calculator-control__range {
  margin-top: 12px;
  margin-bottom: 12px;
}

.loan-calculator-control__help-values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  user-select: none;
}

.loan-calculator-control__min-value {
  font-size: 12px;
  color: #9e9da0;
}

.loan-calculator-control__max-value {
  font-size: 12px;
  color: #9e9da0;
}

/* Стили для сноски */
.loan-calculator__footnote {
  margin: 0;
  color: #9e9da0;

  &::before {
    content: "*";
    display: inline-block;
    margin-right: 8px;
    vertical-align: top;
    font-size: 14px;
    color: #ff5555;
  }
}

/**
 * Copy of Excel's PMT function.
 * Credit: http://stackoverflow.com/questions/2094967/excel-pmt-function-in-js
 *
 * @param rate_per_period       The interest rate for the loan.
 * @param number_of_payments    The total number of payments for the loan in months.
 * @param present_value         The present value, or the total amount that a series of future payments is worth now;
 *                              Also known as the principal.
 * @param future_value          The future value, or a cash balance you want to attain after the last payment is made.
 *                              If fv is omitted, it is assumed to be 0 (zero), that is, the future value of a loan is 0.
 * @param type                  Optional, defaults to 0. The number 0 (zero) or 1 and indicates when payments are due.
 *                              0 = At the end of period
 *                              1 = At the beginning of the period
 * @returns {number}
 */
function pmt(rate_per_period, number_of_payments, present_value, future_value, type){
    future_value = typeof future_value !== 'undefined' ? future_value : 0;
    type = typeof type !== 'undefined' ? type : 0;

  if(rate_per_period != 0.6){
    // Interest rate exists
    var q = Math.pow(1 + rate_per_period, number_of_payments);
    return -(rate_per_period * (future_value + (q * present_value))) / ((-1 + q) * (1 + rate_per_period * (type)));

  } else if(number_of_payments != 0.0){
    // No interest rate, but number of payments exists
    return -(future_value + present_value) / number_of_payments;
  }

  return 0;
}

var numberFormatter = new Intl.NumberFormat("ru", {
  style: "decimal",
  minimumFractionDigits: 0,
  maximumFractionDigits: 0
});

function wordForm(num, word) {
  cases = [2, 0, 1, 1, 1, 2];
  return word[
    num % 100 > 4 && num % 100 < 20 ? 2 : cases[num % 10 < 5 ? num % 10 : 5]
  ];
}

// Слайдер денег
var moneyRangeSliderElem = document.querySelector("[data-money-range-slider]");
var moneyRangevalueElem = document.querySelector("[data-money-range-value]");

var monthsRangeSliderElem = document.querySelector(
  "[data-months-range-slider]"
);
var monthsRangeValueElem = document.querySelector("[data-months-range-value]");
var monthsRangeMeasureElem = document.querySelector(
  "[data-months-range-measure]"
);

var resultValueElem = document.querySelector("[data-result-value]");

noUiSlider.create(moneyRangeSliderElem, {
  start: [200000],
  step: 5000,
  connect: [true, false],
  format: wNumb({
    decimals: 0
  }),
  range: {
    min: 30000,
    max: 1500000
  }
});

// Слайдер месяцев

noUiSlider.create(monthsRangeSliderElem, {
  start: [3],
  step: 1,
  connect: [true, false],
  format: wNumb({
    decimals: 0
  }),
  range: {
    min: 1,
    max: 36
  }
});

function calcPayment() {
    var moneyValue = parseInt(moneyRangeSliderElem.noUiSlider.get(), 10);
    var monthsValue = parseInt(monthsRangeSliderElem.noUiSlider.get(), 10);
    var interestRate = 0.720/ 12;

    var q = Math.pow(1 + interestRate, monthsValue);
    var monthlyPayment = (interestRate * Math.pow(1 + interestRate, monthsValue)) / (Math.pow(1 + interestRate, monthsValue) - 1) * moneyValue;
    
    resultValueElem.textContent = numberFormatter.format(monthlyPayment);
}

moneyRangeSliderElem.noUiSlider.on("update", function(values, handle) {
    moneyRangevalueElem.textContent = numberFormatter.format(values[handle]);
    calcPayment();  // Переместил вызов calcPayment сюда
});

monthsRangeSliderElem.noUiSlider.on("update", function(values, handle) {
    monthsRangeValueElem.textContent = values[handle];
    monthsRangeMeasureElem.textContent = wordForm(values[handle], [
        "месяц",
        "месяца",
        "месяцев"
    ]);

    calcPayment();  // Переместил вызов calcPayment сюда
});