Калькулятор с ипользованием Ion.RangeSlider

210
23 октября 2018, 17:50

Подскажите пожалуйста как реализовать кальлятор с ипользованием Ion.RaneSlider - - грубо говоря переделать такой скрипт http://jsfiddle.net/22u4orc0/17/

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

только вместо Ui Slider использовать RangeSlider

<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">К выплате:</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>
READ ALSO
Кнопка показать еще на AJAX

Кнопка показать еще на AJAX

есть код на ajax который при прокрутке страницы подгружает товар

209
canvas 3d ящик с открытием

canvas 3d ящик с открытием

Есть готовые решения для реализации простого ящика с открытием крышки на canvas? Пример

225