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

Question

我正在构建一个使用 "snap to increments" JQuery UI 滑块的表单： 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, '' + ',' + '');
      }
      return x1 + x2;
  }
});
</script>

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

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

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

Answer 1

首先，这是一种在文本中添加逗号的简单方法，虽然不能 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 时

编辑

修复了代码错误

Answer 2

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

$(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, '' + ',' + '');
      }
      return x1 + x2;
  }
});

查看此 jsfiddle 示例：https://jsfiddle.net/bpursley/u1nLma3x/7/

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

jQuery UI Slider custom step increments and comma on load

javascript

jquery

jquery-ui-slider