Javascript jQuery UI滑块自定义步长增量和加载时的逗号

我正在构建一个使用“捕捉到增量”JQuery UI滑块的表单：

这是我目前拥有的代码：

<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>

$（函数（）{
$（“#滑块”）.滑块({
数值：100，
最低：2501，
最高：50000，
步骤：500，
幻灯片：功能（事件、用户界面）{
$（“#LoanAmount”）.val（“$”+addCommas（ui.value））；
}
});
$（“#LoanAmount”）.val（$”+$（“#滑块”）.slider（“值”）；
函数addCommas（nStr）
{
nStr+=''；
x=nStr.split（'.'）；
x1=x[0]；
x2=x.长度>1？'.+x[1]：''；
var rgx=/（\d+）（\d{3}）/；
while（rgx.测试（x1））{
x1=x1.替换（rgx，'$1'+'，'+'$2'）；
}
返回x1+x2；
}
});

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

我的第二个问题是，出于法规遵从性原因，我需要最小金额为$2501，而不是$2500，但我仍然希望步长增量显示在偶数500上。我需要它是这样的：$2501>$3000>$3500>$4000>$4500，直到它以50000美元结束

---

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

首先，这里有一个简单的方法可以在文本中添加逗号，但不能100%确定所有浏览器是否支持逗号，不过请谨慎使用

textvalue = Number(nStr).toLocaleString('en',{minimumFractionDigits: 0 });

对于第一个问题，请这样做

$( "#LoanAmount" ).val( "$" + $( "#slider" ).slider( "value" ) );

应该是

$( "#LoanAmount" ).val( "$" + addCommas($( "#slider" ).slider( "value" )) );

至于第二个问题，一个简单的破解方法是将起始值设置为2501，然后在幻灯片函数中执行此操作

slide: function( event, ui ) {
  var val = ui.value
  if(val === 2500){
     val = 2501
  }
  else{
     val = val / 10
     val = Math.round(val)
     val = val * 10 
  }

  $( "#LoanAmount" ).val( '$' + addCommas(val) );
}

我认为这是可行的，基本上你检查一下这个值是否是2500，然后你把它设置为2501，但你必须确保当你把它调回偶数500

编辑

---

修复了代码错误

如果您只是操纵幻灯片事件中的值，会发生什么，如下所示：

$(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;
  }
});

---

请参阅此JSFIDLE以获取示例：

谢谢您的帮助。您的代码运行良好，但滑块的结尾是49500美元，而不是50,00美元。有什么解决办法吗？再次感谢是的，只需将滑块最大值更改为50001，它将变为50000。我更新了我的答案和JSFIDLE Hey Bpurley，抱歉再次出错。我决定使用默认的滑块值5000，但当页面加载时，它打印为5001。关于如何解决这个问题的任何提示。提前谢谢。我得看看你的代码。你能编辑你的问题吗？或者用他的问题代码发布一个新问题吗？嘿@bpursley谢谢你的帮助。这里是我发布的新问题：嘿，查尔斯，谢谢你的帮助。我的第一个问题得到了解决，但当尝试第二个代码时，滑块完全停止工作。它不会再滑动了。哦，看看这行var val=us.value它应该是var val=ui.value你应该能够打开调试器工具并获得错误消息。虽然第一个awnser为我做了这件事，但我想测试你的代码，让你知道它是如何工作的。滑块现在可以工作了，但它在页面加载时打印2500美元，只有当滑块被使用并滑回最小值时，它才会变为2501美元。我很高兴你能解决这个问题，你介意为我的帮助投票吗？为了解决这个问题，你只需将min val设置为2501，我做了，但我仍然没有15分的声誉，所以投票最终会出现。仅供参考，我确实尝试将最小值更改为2501，但结果恰恰相反。页面加载了正确的2501，但在滑动到最小值后，页面更改为2500