1

почему, если первым передвинуть скролл месяца на значение 2 то сумма не меняется? а если вернуть в положение 1 то меняется, как будто стоит 2? и такая же ситуация со скроллом цена

$(function () {

	function calcSumm() {
		var cash = +$("#slider-range-max-cash").slider("value");
		var months = +$("#slider-range-max-month").slider("value");
		var summ = cash * (13 / 100) * months;
		$(".summ").html(summ.toFixed(2));
	}

	$(".cash #slider-range-max-cash").slider({
		range: "max",
		min: 1000,
		max: 500000,
		value: 1000,
		slide: function (event, ui) {
			$(".cash #amount").val(ui.value);
			calcSumm();
		}
	});
	$(".cash #amount").val($("#slider-range-max-cash").slider("value"));

	$(".month #slider-range-max-month").slider({
		range: "max",
		min: 1,
		max: 12,
		value: 1,
		slide: function (event, ui) {
			$(".month #month").val(ui.value);
			calcSumm();
		}
	});
	$(".month #month").val($("#slider-range-max-month").slider("value"));
  
	calcSumm();

});
body {
  padding: 10px;
}

.cash,
.month {
  width: 50%;
}

#amount,
#month {
  text-align: right;
  width: 50px;
  margin-right: 10px;
  margin-bottom: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div class="cash">
  <label for="amount">Price:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">в‚Ѕ
  
  <div id="slider-range-max-cash"></div>

</div>

<br>

 <div class="month">
  <label for="month">Month:</label>
  <input type="text" id="month" readonly style="border:0; color:#f6931f; font-weight:bold;">месяцев
  
  <div id="slider-range-max-month"></div>

</div>


<br>

<div>Сумма: <span class="summ"></span></div>

1 ответ 1

1

http://api.jqueryui.com/slider/#event-slide

The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement.

Значение ui.value - это значение, которое контрол будет иметь (но еще не имеет) в результате текущего перемещения.

То есть Вы рано пытаетесь получить значение того слайдера, который в данный момент перемещается.

Используйте событие change:

$(function() {

  function calcSumm() {
    var cash = $("#slider-range-max-cash").slider("value");
    var months = $("#slider-range-max-month").slider("value");
    var summ = cash * (13 / 100) * months;
    $(".summ").html(summ.toFixed(2));
  }

  $(".cash #slider-range-max-cash").slider({
    range: "max",
    min: 1000,
    max: 500000,
    value: 1000,
    change: function(event, ui) {
      $(".cash #amount").val(ui.value);
      calcSumm();
    }
  });
  $(".cash #amount").val($("#slider-range-max-cash").slider("value"));

  $(".month #slider-range-max-month").slider({
    range: "max",
    min: 1,
    max: 12,
    value: 1,
    change: function(event, ui) {
      $(".month #month").val(ui.value);
      calcSumm();
    }
  });
  $(".month #month").val($("#slider-range-max-month").slider("value"));

  calcSumm();

});
body {
  padding: 10px;
}

.cash,
.month {
  width: 50%;
}

#amount,
#month {
  text-align: right;
  width: 50px;
  margin-right: 10px;
  margin-bottom: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="cash">
  <label for="amount">Price:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">в‚Ѕ

  <div id="slider-range-max-cash"></div>

</div>

<br>

<div class="month">
  <label for="month">Month:</label>
  <input type="text" id="month" readonly style="border:0; color:#f6931f; font-weight:bold;">месяцев

  <div id="slider-range-max-month"></div>

</div>


<br>

<div>Сумма: <span class="summ"></span></div>

2
  • а чо изменилось в вашем примере не подскажите? не могу найти
    – murfuc
    17 янв 2019 в 8:15
  • @murfuc события slide изменились на change
    – user176262
    17 янв 2019 в 14:29

Ваш ответ

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

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