I made a calculator, with three sliders, counts everything as it should be, but for some reason, moving the lower "sliders" moves and the first one, please help me fix it. Also, I would like to know the opinion about the quality of the code (maybe something can be more easily written). Also, I do not understand why on ios the "slider" does not move after the finger, when holding it on the slider, can this be fixed?

Calculator link

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-min").slider("value", check); recount(); }); $(document).on("change keyup", "#amount3", function() { time = +$(this).val(); $("#slider-range-min").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")); });

    1 answer 1

    working version of the calculator with corrected errors

     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")); }); 
     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; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>1256</span></strong> </p> </div> </div>

    For iOS, added the jquery.ui.touch-punch.min.js library.

      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")); });