javascript - jQuery UI Slider 自定义步进增量和加载时的逗号

Question

我正在构建一个使用“对齐增量”JQuery UI slider 的表单: https://jqueryui.com/slider/#steps

这是我目前拥有的代码:

<script>
$(function() {
  $( "#slider" ).slider({
    value:100,
    min: 2501,
    max: 50000,
    step: 500,
    slide: function( event, ui ) {
      $( "#LoanAmount" ).val( '$' + addCommas(ui.value) );
    }
  });
  $( "#LoanAmount" ).val( "$" + $( "#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>

我的第一个问题是代码仅在使用 slider 后显示值的逗号，而不是在页面加载时显示。页面加载最小值 $2501 而不是 $2,501

我的第二个问题是，出于合规性原因，我需要将最低金额设置为 2,501 美元而不是 2,500 美元，但我仍然希望步进增量显示在偶数 500 上。我需要它是这样的:2,501 美元 > 3,000 美元 > 3,500 美元 > 4,000 美元 > 4,500 美元，直到达到 50,000 美元。

任何帮助将不胜感激。谢谢!

Answer 1

如果你只是在滑动事件中操作值会怎样，就像这样:

$(function() {
  $( "#slider" ).slider({
      value:100,
      min: 2501,
      max: 50001,
      step: 500,
      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;
  }
});

请参阅此 jsfiddle 示例:https://jsfiddle.net/bpursley/u1nLma3x/7/