我正在使用 jQuery UI 中的价格范围 slider ,并在我的配置代码中回显一些值。除了最高价格未正确显示之外,一切正常。当我回显这两个 php 变量时,我看到的是:
29.95
45
但在价格范围 slider 中显示以下值:
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" />
最佳答案
尝试添加 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">
关于javascript - jQuery UI 价格范围 slider 处理小数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56183247/