javascript - 使用自定义步骤增量时 jQuery UI slider 默认值问题

Question

我正在使用“捕捉增量”JQuery UI slider 构建表单:https://jqueryui.com/slider/#steps

我使用以下代码，以便 slider 的自定义最小值为 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, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }
});
</script>

我需要这个值:10000，以便 slider 在该特定步骤上加载，但问题是它在页面上打印为 10001 而不是 10000 .

关于如何解决这个问题有什么建议吗？

谢谢!

Answer 1

一个可能的解决方案是更正您的 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, '$1' + ',' + '$2');
    }
    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 ($50 increments):</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>