JSFiddle - React, Tailwind, and code Playground

by Vyacheslav Yashnikov

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="calculator">
    <p>
        <label for="amount">Вклад</label>
        <input type="text" id="deposit-slider-value" readonly style="border:0; font-weight:bold;">
    </p>

    <div id="deposit-slider"></div>

    <p>
        <label for="amount">Срок</label>
        <input type="text" id="date-slider-value" readonly style="border:0; font-weight:bold;">
    </p>

    <div id="date-slider"></div>
    <p>
        <p id="profitability-value">Доходность: <strong><span>14,5 % годовых</span></strong></p>
        <p id="interest-charges-value">Начисленные проценты: <strong><span></span></strong></p>
        <p id="result-of-investment-value">Сумма вклада за <span id="Calculator-value-date"></span>: <strong><span></span></strong></p>
</div>

CSS

body {
    background-color: #2c3844;
    color: #fff;
}
input {
    background-color: #2c3844;
    color: #34a3db;
}
#tarif {
    background-color: #fff;
    color: #444;
}

span { 
    color: #91e8fc;
}
.ui-widget-content{
    background-color: #6b6b6b;
    border-color: #6b6b6b;
}
.ui-slider-handle {
    background: #c1c2c4;
    border-radius: 0.6em;
}
.ui-slider-range {
    background: #34a3db;
}

JavaScript

jQuery(function() {
		// Создаем переменные для расчета
    var ProfitabilityValue = 0.145; // Доходность в %
    var InterestChargesValue = 0; // Начисленные проценты
    var ResultOfInvestmentValue = 0; // Рзультат инвестиррования 
    var DepositSliderValue= 0; // Размер депозита
    var DateSliderValue = 0; // Срок инвестирования
    
    // Вводим формулы для рассчета
    function recount() {
				// Считаем прибыль за время инвестирования
        InterestChargesValue = (DepositSliderValue * ProfitabilityValue) / 12 * DateSliderValue;
        // Считаем результат инвестирования за указанный период
        ResultOfInvestmentValue = InterestChargesValue + DepositSliderValue;
    
        // Выводим данные
        jQuery("#interest-charges-value span").html(InterestChargesValue.toFixed() + ' ₽');
        jQuery("#result-of-investment-value span").html(ResultOfInvestmentValue + ' ₽');
        jQuery("#Calculator-value-date").html(DateSliderValue + ' мес.');
        console.log(DateSliderValue);
};
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    // Вывод данных из слайдера, при условии что он был сдвинут, слайдер выдает переменную в виде строки, преобразуем ее в число добавив унарный +
    $(document).on("change keyup", "#deposit-slider-value", function() {
        DepositSliderValue = +$(this).val();
        $("#deposit-slider").slider("value", DepositSliderValue);
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    });
    // Вывод данных из слайдера, при условии что он был сдвинут, слайдер выдает переменную в виде строки, преобразуем ее в число добавив унарный +
    $(document).on("change keyup", "#date-slider-value", function() {
        DateSliderValue = +$(this).val();
        $("#date-slider").slider("value", DateSliderValue);
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    });
});
// Слайдер 1
$(function() {
   ...