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="AverageTicket" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="AverageTicket-slider"></div>
    
    <p>
  <label for="amount">Какой бюджет на рекламу в Я.Директ вы готовы тратить в месяц? (в тыс.р.)</label>
  <input type="text" id="AdvertisingBudget" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="AdvertisingBudget-slider"></div>
            <p>
                <p id="UniqueVisitors">Количество привлеченных посетителей из рекламы в Я.Директ на Ваш сайт:  <strong><span></span></strong></p>
                <p id="NewCustomers">Количество новых клиентов в месяц с нашим продающим сайтом (+ настройка Я.Директ бесплатно): <strong><span></span></strong></p>
                <p id="RevenueGrowth">Прирост прибыли с нашим продающим сайтом (за вычетом расходов на рекламу и ведение кампании): <strong><span></span></strong></p>
                </div>
        </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 AverageTicket = 1500,
        AdvertisingBudget = 15000,
        CPC = 30,
        Conversion = 0.25,
        RevenueGrowth = 0,
        UniqueVisitors = 0,
    	  NewCustomers = 0;
    // Функция расчета
    function recount() {
        // Считаем количество привлеченных посетителей из рекламы и округляем переменную до целого числа
        UniqueVisitors = +(AdvertisingBudget / CPC).toFixed();        
        // Считаем количество новых клиентов в месяц
        NewCustomers = +(UniqueVisitors * Conversion).toFixed();
        // Считаем прирост прибыли
        RevenueGrowth = +((NewCustomers * AverageTicket)-(AdvertisingBudget+15000)).toFixed();
        // Выводим данные
        jQuery("#UniqueVisitors span").html(UniqueVisitors + ' чел.');
        jQuery("#NewCustomers span").html(NewCustomers + ' чел.');
        jQuery("#RevenueGrowth span").html(RevenueGrowth + ' руб.');
};
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    // Вывод данных из слайдера, при условии что он был сдвинут, слайдер выдает переменную в виде строки, преобразуем ее в число добавив унарный +
    $(document).on("change keyup", "#AverageTicket", function() {
        AverageTicket = +$(this).val();
        $("#AverageTicket-slider").slider("value", AverageTicket);
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    });
    // Вывод данных из слайдера, при условии что он был сдвинут, слайдер выдает переменную в виде строки, преобразуем ее в число добавив унарный +
    $(document).on("change keyup", "#AdvertisingBudget", function() {
        AdvertisingBudget = +$(this).val();
        $("#AdvertisingBudget-slider").slider("value", AdvertisingBudget);
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    });
});
// Слайдер 1
$(function() {
    $("#AverageTicket-slider").slider({
        range: "min",
        value: 1,
        min: 1500,
      ...