jQuery UI 价格范围滑块处理小数答案

【问题标题】：jQuery UI price range slider handling decimalsjQuery UI 价格范围滑块处理小数
【发布时间】：2019-05-17 09:14:24
【问题描述】：

我正在使用 jQuery UI 中的价格范围滑块并在我的配置代码中回显一些值。除了最高价格没有正确显示外，一切正常。当我回显两个 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" />

【问题讨论】：

PHP 中的值是否来自 MySQL？
由于 PHP 与问题无关，您能否编辑问题以包含实际输出值。一个有效的 MCVE 也会有所帮助
@MasoodAslami 是的，我从数据库中检索它，但我认为这不是 PHP 问题，因为当我回显这些值时，它们会正确显示。
@RoryMcCrossan 我已经添加了输出。
感谢您的编辑。我将代码放在可执行的 sn-p 中 - 请注意，您的代码将值设置为 45，您的意思是改用 44.95 吗？

标签： javascript jquery jquery-ui

【解决方案1】：

尝试添加step 选项

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">

【讨论】：