JSFiddle - React, Tailwind, and code Playground

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">
    <div id="choise_tarif">
  <p>Выберите тариф</p>
   <p>
   <select id="tarif">
    <option value='6'>Базовый</option>
    <option value='1'>Профессиональный</option>
    <option value='2'>Корпоративный</option>
   </select>
  </p>
 </div>
<p>
  <label for="amount">Клиентов в месяц:</label>
  <input type="text" id="amount" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="slider-range-min"></div>
    
    <p>
  <label for="amount">Средний чек на 1-го клиента:</label>
  <input type="text" id="amount2" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="slider-range-min2"></div>
            <p>
  <label for="amount">Срок использования терминала:</label>
  <input type="text" id="amount3" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="slider-range-min3"></div>
                <p id="revenue">Ваша чистая выручка: <strong><span>24162</span></strong></p>
                </div>
        </div>

CSS

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

JavaScript

jQuery(function() {
    var tarif = 6,
        result_outptut = jQuery("#revenue span"),
        client = 24,
        revenue = 0,
        check = 4000,
        time = 3;

    function recount() {
        revenue = (client+check+time)*tarif;
        result_outptut.html(revenue + ' руб/мес');
    };
    jQuery('#tarif').change(function() {
        tarif = jQuery('#tarif option:selected').val();
        recount();
    });
    $(document).on("change keyup", "#amount", function() {
        client = +$(this).val();
        $("#slider-range-min").slider("value", client);
        recount();
    });
    $(document).on("change keyup", "#amount2", function() {
        check = +$(this).val();
        $("#slider-range-min2").slider("value", check);
        recount();
    });
    $(document).on("change keyup", "#amount3", function() {
        time = +$(this).val();
        $("#slider-range-min3").slider("value", time);
        recount();
    });
});
$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 24,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $('#amount').val(ui.value).trigger("change");
        }
    });
    $("#amount").val($("#slider-range-min").slider("value"));
});

$(function() {
    $("#slider-range-min2").slider({
        range: "min",
        value: 4000,
        min: 1000,
        max: 40000,
        slide: function(event, ui) {
            $("#amount2").val(ui.value).trigger("change");
        }
    });
    $("#amount2").val($("#slider-range-min2").slider("value"));
});

$(function() {
    $("#slider-range-min3").slider({
        range: "min",
        value: 3,
        min: 1,
        max: 10,
        slide: function(event, ui) {
            $("#amount3").val(ui.value).trigger("change");
        }
    });
    $("#amount3").val($("#slider-range-min3").slider("value"));
});