Слайдер ценового диапазона jQuery UI обрабатывает десятичные дроби

Question

Я использую ползунок диапазона цен из пользовательского интерфейса jQuery и отображаю некоторые значения в моем коде конфигурации. Все работает, кроме как самая высокая цена не отображается правильно. Когда я повторяю обе переменные php, вот что я вижу:

29.95
45

Но в ползунке ценового диапазона отображаются следующие значения:

29.95 - 44.95

Когда я изменяю самое низкое значение на 30, оно правильно отображает самое высокое значение (45), поэтому десятичные дроби как-то нарушают это. Что я могу сделать, чтобы это исправить?

// Price filter
$("#price-slider").slider({
  range: true,
  min: 29.95,
  max: 45,
  values: [29.95, 45],
  slide: function(event, ui) {
    $("#min-price").val('€' + ui.values[0]);
    $("#max-price").val('€' + ui.values[1]);
  }
});

$("#min-price").val('€' + $("#price-slider").slider("values", 0));
$("#max-price").val('€' + $("#price-slider").slider("values", 1));

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="price-slider"></div>
<input id="min-price" />
<input id="max-price" />

Answer 1

Попробуйте добавить step option

step: 0.01

Проблема возникает из-за того, что шаг по умолчанию равен 1

$("#price-slider").slider({
  range: true,
  min: 29.95,
  max: 45,
  step: 0.01,
  values: [29.95, 45],
  slide: function(event, ui) {
    $("#min-price").val('€' + ui.values[0]);
    $("#max-price").val('€' + ui.values[1]);
  }
});
$("#min-price").val('€' + $("#price-slider").slider("values", 0));
$("#max-price").val('€' + $("#price-slider").slider("values", 1));

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 id="price-slider" class="slide"></div>
<input id="min-price">
<input id="max-price">