Как получить изменившееся значение бегунка?

Question

let currency = document.querySelector('.active_cur').innerText;
let payment = document.querySelector('.active_paym').innerText;
let sumRangeInput = document.querySelector('.calc__range_sum');
let termRangeInput = document.querySelector('.calc__range_time');
let percent = 0;
$(".currency").bind('click', function() {
  $('.active_cur').removeClass('active active_cur');
  $(this).addClass('active active_cur');
  currency = document.querySelector('.active_cur').innerText;
});
$(".payment-choice__choice").bind('click', function() {
  $('.active_paym').removeClass('active active_paym');
  $(this).addClass('active active_paym');
  payment = document.querySelector('.active_paym').innerText;
});
function fSumRangeChange() {
  let oRangeLabel = document.querySelector('.calc__sum_value');
  if (currency === "USD" && currency !== null && currency !== undefined) {
    oRangeLabel.innerText = '$' + sumRangeInput.value;
  } else if (currency === "UAH" && currency !== null && currency !== undefined) {
    oRangeLabel.innerText = sumRangeInput.value + 'грн';
  }
let nLabelWidth = parseFloat(window.getComputedStyle(oRangeLabel).width);
  oRangeLabel.style.left = parseInt(sumRangeInput.value / sumRangeInput.max * 100 - 10) + '%';
}
function fTermRangeChange() {
  let oRangeInput = document.querySelector('.calc__range_time');
  let oRangeLabel = document.querySelector('.calc__term_value');
  oRangeLabel.innerText = termRangeInput.value + 'мес';
  let nLabelWidth = parseFloat(window.getComputedStyle(oRangeLabel).width);
  oRangeLabel.style.left = parseInt(termRangeInput.value / termRangeInput.max * 100 - 12) + '%';
}
// код ниже уже не работает
if (currency === "USD" && currency !== null && currency !== undefined) {
  if (payment === "ежемесячно" && payment !== null && payment !== undefined) {
    if (parseInt(termRangeInput.value) < 6) {
      document.querySelector('.rate__percent').innerText = "12%";
    } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
      document.querySelector('.rate__percent').innerText = "16%";
    } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
      document.querySelector('.rate__percent').innerText = "18%";
    } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
      document.querySelector('.rate__percent').innerText = "19%";
    } else {
      document.querySelector('.rate__percent').innerText = "20%";
    }
  } else if (payment === "в конце срока" && payment !== null && payment !== undefined) {
    if (parseInt(termRangeInput.value) < 6) {
      document.querySelector('.rate__percent').innerText = "13%";
    } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
      document.querySelector('.rate__percent').innerText = "17%";
    } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
      document.querySelector('.rate__percent').innerText = "20%";
    } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
      document.querySelector('.rate__percent').innerText = "21%";
    } else {
      document.querySelector('.rate__percent').innerText = "22%";
    }
  }
} else if (currency === "UAH" && currency !== null && currency !== undefined) {
  if (payment === "ежемесячно" && payment !== null && payment !== undefined) {
    if (parseInt(termRangeInput.value) < 6) {
      document.querySelector('.rate__percent').innerText = "21%";
    } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
      document.querySelector('.rate__percent').innerText = "23%";
    } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
      document.querySelector('.rate__percent').innerText = "25%";
    } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
      document.querySelector('.rate__percent').innerText = "28%";
    } else {
      document.querySelector('.rate__percent').innerText = "31%";
    }
  } else if (payment === "в конце срока" && payment !== null && payment !== undefined) {
    if (parseInt(termRangeInput.value) < 6) {
      document.querySelector('.rate__percent').innerText = "22%";
    } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
      document.querySelector('.rate__percent').innerText = "24%";
    } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
      document.querySelector('.rate__percent').innerText = "27%";
    } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
      document.querySelector('.rate__percent').innerText = "30%";
    } else {
      document.querySelector('.rate__percent').innerText = "33%";
    }
  }
}

.calc {
  width: 600px;
  min-width: 320px;
  margin: auto;
  padding: 20px;
}

.calc__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px 0;
  position: relative;
}

.calc__section-name {
  font-size: 16px;
  font-weight: 600;
}

.calc__range-wrapper {
  width: 70%;
  color: #c7c5d9;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: wrap;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.calc__range {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 15px;
  outline: none;
  opacity: 0.8;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range:hover {
  opacity: 1;
}

.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  width: 15px;
  background: #fff;
  border: 5px solid #92bb58;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top: -1.5%;
  -webkit-box-shadow: 0 0 20px #92bb58;
  box-shadow: 0 0 20px #92bb58;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background: #fff;
  border: 5px solid #92bb58;
  border-radius: 10px;
  box-shadow: 0 0 10px #92bb58;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range::-webkit-slider-runnable-track {
  background: -webkit-gradient(linear, left bottom, left top, from(#93bb58), to(#93bb58));
  background: -webkit-linear-gradient(bottom, #93bb58 0%, #93bb58 100%);
  background: linear-gradient(to top, #93bb58 0%, #93bb58 100%);
  height: 2px;
}

.calc__range_time::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 10px;
  background: #92bb58;
  margin-top: -1%;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range_time::-moz-range-thumb {
  height: 10px;
  width: 10px;
  background: #92bb58;
  border-radius: 10px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__sum_value {
  background: #fff;
  position: absolute;
  border: 0px solid #e9e8eb;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  bottom: 40px;
  left: -24px;
  color: #000;
  padding: 4px 10px;
  -webkit-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.calc__range-wrapper:hover .calc__sum_value {
  border: 2px solid #e9e8eb;
  -webkit-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.calc__term_value {
  background: #fff;
  position: absolute;
  border: 0px solid #e9e8eb;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  bottom: 40px;
  left: -24px;
  color: #000;
  padding: 4px 10px;
  -webkit-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.calc__range-wrapper:hover .calc__term_value {
  border: 2px solid #e9e8eb;
  -webkit-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.currency-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 9rem;
}

.currency {
  padding: 0.5rem 1rem;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  cursor: pointer;
}

.currency:hover {
  background-color: #92bb58;
  color: #fff;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.payment-choice {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 60%;
  font-size: 16px;
}

.payment-choice__choice {
  cursor: pointer;
  padding: 5px 15px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-weight: 600;
}

.payment-choice__choice:hover {
  background-color: #92bb58;
  color: #fff;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.rate {
  width: 60%;
}

.rate__percent {
  font-weight: bold;
}

.rate__mask {
  font-size: 12px;
  color: #c5c5c5;
}

.total {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.total__inner {
  width: 50%;
  margin: 10px 0 40px 0;
}

.total__sum {
  font-weight: bold;
  font-size: 16px;
}

.total__mask {
  font-size: 12px;
  color: #c5c5c5;
}

.button {
  font-weight: bold;
  font-size: 20px;
  color: #000;
  width: 100%;
  background-color: #fddc66;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  padding: 20px 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.button:hover {
  text-decoration: none;
  color: #fff;
}

.active {
  background-color: #92bb58;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calc">
  <div class="calc__inner">
    <h2 class="calc__heading">Рассчитайте пассивный доход
    </h2>
    <div class="currency-wrapper">
      <div class="currency active active_cur">USD</div>
      <div class="currency">UAH</div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Сумма</span>
    <div class="calc__range-wrapper"><input class="calc__range calc__range_sum" type="range" min="1000" max="100000" value="0" step="1000" OnInput="fSumRangeChange();" />
      <div class="calc__sum calc__sum_min">$1000
      </div>
      <div class="calc__sum calc__sum_value">$0
      </div>
      <div class="calc__sum calc__sum_max">$100000
      </div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Срок</span>
    <div class="calc__range-wrapper"><input class="calc__range calc__range_time" type="range" min="3" max="36" value="0" step="1" OnInput="fTermRangeChange();" />
      <div class="calc__term calc__term_min">3мес
      </div>
      <div class="calc__term calc__term_value">0мес
      </div>
      <div class="calc__term calc__term_max">36мес
      </div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Выплата процентов</span>
    <div class="payment-choice">
      <div class="payment-choice__choice payment-choice__choice_monthly active active_paym">ежемесячно
      </div>
      <div class="payment-choice__choice payment-choice__choice_annualy">в конце срока
      </div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Процентная ставка</span>
    <div class="rate">
      <div class="rate__percent">0
      </div>
      <div class="rate__mask">зависит от срока, валюты и формата выплаты процентов
      </div>
    </div>
  </div>
  <hr>
  <h2 class="calc__heading">Ваш пассивный доход
  </h2>
  <div class="total">
    <div class="total__inner">
      <div class="total__sum">120 500
      </div>
      <div class="total__mask">за весь срок вложения
      </div>
    </div>
    <div class="total__inner">
      <div class="total__sum">1 500
      </div>
      <div class="total__mask">ежемесячно
      </div>
    </div>
  </div><a class="button" href="calculation.html">Инвестировать</a>
</div>

При изменении значения бегунка меняются значения процентной ставки в зависимости от валюты и выбора типа платежа ежемесячно или в конце срока. Изменение положений бегунков отслеживают функции fSumRangeChange() и fTermRangeChange(). Но как сделать, чтобы изменившиеся значения бегунков были видны за пределами этих функций?

Вас сейчас заминусуют за простыню кода.., представьте как ваше сообщение выглядит на экране мобильного — Stranger in the Q, Aug 28 '18 at 05:37
Ну и создай глобальные переменные и присваивай эти значения им... И будут доступны где угодно и когда угодно — Air, Aug 28 '18 at 05:40
Если мой ответ вам помог, нажмите на галочку рядом с ответом и на треугольник вверх, пожалуйста. — Diskyp, Aug 28 '18 at 07:18

Diskyp · Answer 1 · 2018-08-28T06:03:16.087

Ваш неработающий код я поместил в функцию, которая вызывается при инициализации страницы, в обработчиках изменения бегунков и нажатия на кнопки свитчера. Теперь процентная ставка меняется.

let currency = document.querySelector('.active_cur').innerText;
let payment = document.querySelector('.active_paym').innerText;
let sumRangeInput = document.querySelector('.calc__range_sum');
let termRangeInput = document.querySelector('.calc__range_time');
let percent = 0;
$(".currency").bind('click', function() {
  $('.active_cur').removeClass('active active_cur');
  $(this).addClass('active active_cur');
  currency = document.querySelector('.active_cur').innerText;
  procentChange()
});
$(".payment-choice__choice").bind('click', function() {
  $('.active_paym').removeClass('active active_paym');
  $(this).addClass('active active_paym');
  payment = document.querySelector('.active_paym').innerText;
  procentChange()
});
function fSumRangeChange() {
  let oRangeLabel = document.querySelector('.calc__sum_value');
  if (currency === "USD" && currency !== null && currency !== undefined) {
    oRangeLabel.innerText = '$' + sumRangeInput.value;
  } else if (currency === "UAH" && currency !== null && currency !== undefined) {
    oRangeLabel.innerText = sumRangeInput.value + 'грн';
  }
let nLabelWidth = parseFloat(window.getComputedStyle(oRangeLabel).width);
  oRangeLabel.style.left = parseInt(sumRangeInput.value / sumRangeInput.max * 100 - 10) + '%';
  procentChange()
}
function fTermRangeChange() {
  let oRangeInput = document.querySelector('.calc__range_time');
  let oRangeLabel = document.querySelector('.calc__term_value');
  oRangeLabel.innerText = termRangeInput.value + 'мес';
  let nLabelWidth = parseFloat(window.getComputedStyle(oRangeLabel).width);
  oRangeLabel.style.left = parseInt(termRangeInput.value / termRangeInput.max * 100 - 12) + '%';
  procentChange()
}
// код ниже уже работает 
function procentChange(){
  if (currency === "USD" && currency !== null && currency !== undefined) {
    if (payment === "ежемесячно" && payment !== null && payment !== undefined) {
      if (parseInt(termRangeInput.value) < 6) {
        document.querySelector('.rate__percent').innerText = "12%";
      } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
        document.querySelector('.rate__percent').innerText = "16%";
      } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
        document.querySelector('.rate__percent').innerText = "18%";
      } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
        document.querySelector('.rate__percent').innerText = "19%";
      } else {
        document.querySelector('.rate__percent').innerText = "20%";
      }
    } else if (payment === "в конце срока" && payment !== null && payment !== undefined) {
      if (parseInt(termRangeInput.value) < 6) {
        document.querySelector('.rate__percent').innerText = "13%";
      } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
        document.querySelector('.rate__percent').innerText = "17%";
      } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
        document.querySelector('.rate__percent').innerText = "20%";
      } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
        document.querySelector('.rate__percent').innerText = "21%";
      } else {
        document.querySelector('.rate__percent').innerText = "22%";
      }
    }
  } else if (currency === "UAH" && currency !== null && currency !== undefined) {
    if (payment === "ежемесячно" && payment !== null && payment !== undefined) {
      if (parseInt(termRangeInput.value) < 6) {
        document.querySelector('.rate__percent').innerText = "21%";
      } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
        document.querySelector('.rate__percent').innerText = "23%";
      } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
        document.querySelector('.rate__percent').innerText = "25%";
      } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
        document.querySelector('.rate__percent').innerText = "28%";
      } else {
        document.querySelector('.rate__percent').innerText = "31%";
      }
    } else if (payment === "в конце срока" && payment !== null && payment !== undefined) {
      if (parseInt(termRangeInput.value) < 6) {
        document.querySelector('.rate__percent').innerText = "22%";
      } else if (parseInt(termRangeInput.value) > 5 && parseInt(termRangeInput.value) < 12) {
        document.querySelector('.rate__percent').innerText = "24%";
      } else if (parseInt(termRangeInput.value) > 11 && parseInt(termRangeInput.value) < 24) {
        document.querySelector('.rate__percent').innerText = "27%";
      } else if (parseInt(termRangeInput.value) > 23 && parseInt(termRangeInput.value) < 36) {
        document.querySelector('.rate__percent').innerText = "30%";
      } else {
        document.querySelector('.rate__percent').innerText = "33%";
      }
    }
  }
}
procentChange()

.calc {
  width: 600px;
  min-width: 320px;
  margin: auto;
  padding: 20px;
}

.calc__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px 0;
  position: relative;
}

.calc__section-name {
  font-size: 16px;
  font-weight: 600;
}

.calc__range-wrapper {
  width: 70%;
  color: #c7c5d9;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: wrap;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.calc__range {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 15px;
  outline: none;
  opacity: 0.8;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range:hover {
  opacity: 1;
}

.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  width: 15px;
  background: #fff;
  border: 5px solid #92bb58;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top: -1.5%;
  -webkit-box-shadow: 0 0 20px #92bb58;
  box-shadow: 0 0 20px #92bb58;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background: #fff;
  border: 5px solid #92bb58;
  border-radius: 10px;
  box-shadow: 0 0 10px #92bb58;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range::-webkit-slider-runnable-track {
  background: -webkit-gradient(linear, left bottom, left top, from(#93bb58), to(#93bb58));
  background: -webkit-linear-gradient(bottom, #93bb58 0%, #93bb58 100%);
  background: linear-gradient(to top, #93bb58 0%, #93bb58 100%);
  height: 2px;
}

.calc__range_time::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 10px;
  background: #92bb58;
  margin-top: -1%;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__range_time::-moz-range-thumb {
  height: 10px;
  width: 10px;
  background: #92bb58;
  border-radius: 10px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

.calc__sum_value {
  background: #fff;
  position: absolute;
  border: 0px solid #e9e8eb;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  bottom: 40px;
  left: -24px;
  color: #000;
  padding: 4px 10px;
  -webkit-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.calc__range-wrapper:hover .calc__sum_value {
  border: 2px solid #e9e8eb;
  -webkit-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.calc__term_value {
  background: #fff;
  position: absolute;
  border: 0px solid #e9e8eb;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  bottom: 40px;
  left: -24px;
  color: #000;
  padding: 4px 10px;
  -webkit-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.calc__range-wrapper:hover .calc__term_value {
  border: 2px solid #e9e8eb;
  -webkit-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.currency-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 9rem;
}

.currency {
  padding: 0.5rem 1rem;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  cursor: pointer;
}

.currency:hover {
  background-color: #92bb58;
  color: #fff;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.payment-choice {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 60%;
  font-size: 16px;
}

.payment-choice__choice {
  cursor: pointer;
  padding: 5px 15px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-weight: 600;
}

.payment-choice__choice:hover {
  background-color: #92bb58;
  color: #fff;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.rate {
  width: 60%;
}

.rate__percent {
  font-weight: bold;
}

.rate__mask {
  font-size: 12px;
  color: #c5c5c5;
}

.total {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.total__inner {
  width: 50%;
  margin: 10px 0 40px 0;
}

.total__sum {
  font-weight: bold;
  font-size: 16px;
}

.total__mask {
  font-size: 12px;
  color: #c5c5c5;
}

.button {
  font-weight: bold;
  font-size: 20px;
  color: #000;
  width: 100%;
  background-color: #fddc66;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  padding: 20px 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.button:hover {
  text-decoration: none;
  color: #fff;
}

.active {
  background-color: #92bb58;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calc">
  <div class="calc__inner">
    <h2 class="calc__heading">Рассчитайте пассивный доход
    </h2>
    <div class="currency-wrapper">
      <div class="currency active active_cur">USD</div>
      <div class="currency">UAH</div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Сумма</span>
    <div class="calc__range-wrapper"><input class="calc__range calc__range_sum" type="range" min="1000" max="100000" value="0" step="1000" OnInput="fSumRangeChange();" />
      <div class="calc__sum calc__sum_min">$1000
      </div>
      <div class="calc__sum calc__sum_value">$0
      </div>
      <div class="calc__sum calc__sum_max">$100000
      </div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Срок</span>
    <div class="calc__range-wrapper"><input class="calc__range calc__range_time" type="range" min="3" max="36" value="0" step="1" OnInput="fTermRangeChange();" />
      <div class="calc__term calc__term_min">3мес
      </div>
      <div class="calc__term calc__term_value">0мес
      </div>
      <div class="calc__term calc__term_max">36мес
      </div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Выплата процентов</span>
    <div class="payment-choice">
      <div class="payment-choice__choice payment-choice__choice_monthly active active_paym">ежемесячно
      </div>
      <div class="payment-choice__choice payment-choice__choice_annualy">в конце срока
      </div>
    </div>
  </div>
  <div class="calc__inner"><span class="calc__section-name">Процентная ставка</span>
    <div class="rate">
      <div class="rate__percent">0
      </div>
      <div class="rate__mask">зависит от срока, валюты и формата выплаты процентов
      </div>
    </div>
  </div>
  <hr>
  <h2 class="calc__heading">Ваш пассивный доход
  </h2>
  <div class="total">
    <div class="total__inner">
      <div class="total__sum">120 500
      </div>
      <div class="total__mask">за весь срок вложения
      </div>
    </div>
    <div class="total__inner">
      <div class="total__sum">1 500
      </div>
      <div class="total__mask">ежемесячно
      </div>
    </div>
  </div><a class="button" href="calculation.html">Инвестировать</a>
</div>

Как получить изменившееся значение бегунка?

1 Answers1