Question

我正在使用jQuery UI中的价格范围滑块，并在我的配置代码中回显了一些值。除最高价格未正确显示外，所有其他功能均可用。当我回显两个php变量时，这就是我看到的：

Module.findExportByName(null, 'connect')

但是在价格范围滑块中，将显示以下值：

29.95
45

当我将最小值更改为29.95 - 44.95时，它会正确显示最大值（30），因此小数点以某种方式破坏了这一点。我该怎么解决？

// 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));

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

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

1 个答案: