0

Сделал калькулятор, с тремя ползунками, считает все как положено, но почему то, двигая нижние "ползунки", двигается и первый, помогите пожалуйста исправить. Также, хотелось бы узнать мнение о качестве кода (может, что-то можно более проще написать). Также, не понимаю, почему на ios "ползунок" не двигается за пальцем, при проведении по слайдеру, это можно исправить?

Ссылка на калькулятор

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"));
});
2
  • В примере если другие ползунки двигаешь, первый тоже движется
    – Децл
    Commented 18 апр. 2020 в 22:33
  • автор вопроса в этом и видит проблему: почему то, двигая нижние "ползунки", двигается и первый, помогите пожалуйста исправить // т.е. вы написали не ответ, а повторили наблюдение автора вопроса. Commented 18 апр. 2020 в 22:36

1 ответ 1

1

рабочий вариант калькулятора с исправленными ошибками

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>

Для iOS добавил библиотеку jquery.ui.touch-punch.min.js.

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.