jQuery UI 使用自定义步长增量时滑块默认值问题
jQuery UI Slider default value issues when using custom step increments
我正在使用 "snap to increments" JQuery UI 滑块构建表单:https://jqueryui.com/slider/#steps
我正在使用以下代码,以便滑块具有 2501 的自定义最小值,但仍然以偶数 500 递增(不添加额外的 1),直到达到最大值 50000。所以步长增量看起来像这:2501 > 3000 > 3500 > 4000 等等,直到达到 50000。
<script>
$(function() {
$("#slider").slider({
value: 10000,
min: 2501,
max: 50001,
step: 500,
range: "min",
slide: function(event, ui) {
var x = Number(ui.value);
if (x > 2501) {
x = x - (x % 500);
}
$("#LoanAmount").val('$' + addCommas(x));
}
});
$("#LoanAmount").val('$' + addCommas($("#slider").slider("value")));
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '' + ',' + '');
}
return x1 + x2;
}
});
</script>
我需要 value: 10000 以便在该特定步骤加载滑块,但问题是它会打印在页面上显示为 10001 而不是 10000。
关于如何解决此问题的任何提示?
谢谢!
一个可能的解决方案是更正您的 addCommas 函数:
$(function () {
$("#slider").slider({
value: 10000,
min: 2501,
max: 50500,
step: 500,
range: "min",
slide: function(event, ui) {
var x = Number(ui.value);
if (x > 2501) {
x = x - (x % 500);
}
$("#amount").val('$' + addCommas(x));
}
});
$("#amount").val('$' + addCommas($("#slider").slider("value")));
function addCommas(nStr) {
var x = Number(nStr);
if (x > 2501) {
x = x - (x % 500);
}
nStr = x.toString();
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '' + ',' + '');
}
return x1 + x2;
}
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
<label for="amount">Amount ( increments):</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
我正在使用 "snap to increments" JQuery UI 滑块构建表单:https://jqueryui.com/slider/#steps
我正在使用以下代码,以便滑块具有 2501 的自定义最小值,但仍然以偶数 500 递增(不添加额外的 1),直到达到最大值 50000。所以步长增量看起来像这:2501 > 3000 > 3500 > 4000 等等,直到达到 50000。
<script>
$(function() {
$("#slider").slider({
value: 10000,
min: 2501,
max: 50001,
step: 500,
range: "min",
slide: function(event, ui) {
var x = Number(ui.value);
if (x > 2501) {
x = x - (x % 500);
}
$("#LoanAmount").val('$' + addCommas(x));
}
});
$("#LoanAmount").val('$' + addCommas($("#slider").slider("value")));
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '' + ',' + '');
}
return x1 + x2;
}
});
</script>
我需要 value: 10000 以便在该特定步骤加载滑块,但问题是它会打印在页面上显示为 10001 而不是 10000。
关于如何解决此问题的任何提示?
谢谢!
一个可能的解决方案是更正您的 addCommas 函数:
$(function () {
$("#slider").slider({
value: 10000,
min: 2501,
max: 50500,
step: 500,
range: "min",
slide: function(event, ui) {
var x = Number(ui.value);
if (x > 2501) {
x = x - (x % 500);
}
$("#amount").val('$' + addCommas(x));
}
});
$("#amount").val('$' + addCommas($("#slider").slider("value")));
function addCommas(nStr) {
var x = Number(nStr);
if (x > 2501) {
x = x - (x % 500);
}
nStr = x.toString();
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '' + ',' + '');
}
return x1 + x2;
}
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
<label for="amount">Amount ( increments):</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>