Question

我正在使用“snap to increment”JQuery UI Slider构建表单：https://jqueryui.com/slider/#steps

我正在使用以下代码，以便滑块的自定义最小值为2501，但仍然会增加偶数500（不添加额外的1），直到达到最大值50000.因此步骤增量如下所示： 2501> 3000＆gt; 3500＆gt; 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 以便滑块加载特定步骤，但问题是它在页面上打印为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>

使用自定义步骤增量时，jQuery UI Slider默认值出现问题

1 个答案: