javascript - 具有非线性步骤的 JQuery UI slider

Question

我正在关注 skobaljic 对类似问题的出色解决方案...( JQuery UI Slider with Non-linear/Exponential/Logarithmic steps )

var slider = $("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    step: 1,
    values: [10, 80],
    slide: function (event, ui) {
        $("#amount").val("RM " + commafy(ui.values[0]) + "  to  RM " + commafy(ui.values[1]));
    }
});
$("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) +
    "  to  RM " + commafy($("#slider-range").slider("values", 1)));

function commafy(val) {
    /* Total range 0 - 2,500,000 */
    /* 70% from 25,000 to 200,000, what have left (2,325,000) share left (25,000) and right (2,300,000) */
    /* So, final dividing */
    var toPresent = 0;
    if (val < 50) {
        toPresent = (val / 50) * 25000;
    } else {
        toPresent = 250000 + (val - 50) / 50 * 2750000;
    };
    return String(toPresent).split("").reverse().join("")
        .replace(/(.{3}\B)/g, "$1,")
        .split("").reverse().join("");
}

他的 fiddle 在这里 http://jsfiddle.net/kk7kuy6p/

我需要一个范围选择器，在前 50% 中为 0 - 250000，在第二个 50% 中为 3,000,000。我已经调整了代码，一切都很好 - 大部分。

var slider = $("#slider-range").slider({
  range: true,
  min: 0,
  max: 100,
  step: 1,
  values: [64, 78],
  slide: function(event, ui) {
    $("#amount").val("£ " + commafy(ui.values[0]) + "  - £ " + commafy(ui.values[1]));
    $("#newpricemin").val(commafy(ui.values[0]));
    $("#newpricemax").val(commafy(ui.values[1]));

  }
});
$("#amount").val("£ " + commafy($("#slider-range").slider("values", 0)) +
  "  - £ " + commafy($("#slider-range").slider("values", 1)));

function commafy(val) {
  /* Total range 0 - 3,000,000 */
  /* 50% from 0 to 250,000, what have left (2,750,000) */
  /* So, final dividing */
  var toPresent = 0;
  if (val < 50) {
    toPresent = (val / 50) * 250000;
  } else {
    toPresent = 250000 + (val - 50) / 50 * 2750000;
  };
  return String(toPresent).split("").reverse().join("")
    .replace(/(.{3}\B)/g, "$1,")
    .split("").reverse().join("");
}

我的 fiddle http://jsfiddle.net/10231kq7/6/

我有两个小问题。比例奇怪地跳跃到 64% 和 78%，但我不知道为什么。另外，我无法在输入框以外的任何内容中显示范围 - 理想情况下我希望它在一个范围内。这可能是非常明显的事情，但 java 确实不是我的强项，任何帮助将不胜感激。

Answer 1

您有两个问题。首先，奇怪的跳跃是 floating point problem 的结果。 。这可以通过对输出数字调用 Math.floor 来解决。

其次，您在 jquery 中使用 .val() 命令。要编辑跨度，您需要使用.text()

如下:

var slider = $("#slider-range").slider({
  range: true,
  min: 0,
  max: 100,
  step: 1,
  values: [64, 78],
  slide: function(event, ui) {
    $("#amount").text("£ " + commafy(ui.values[0]) + "  - £ " + commafy(ui.values[1]));
    $("#newpricemin").val(commafy(ui.values[0]));
    $("#newpricemax").val(commafy(ui.values[1]));

  }
});
$("#amount").val("£ " + commafy($("#slider-range").slider("values", 0)) +
  "  - £ " + commafy($("#slider-range").slider("values", 1)));

function commafy(val) {
  /* Total range 0 - 3,000,000 */
  /* 50% from 0 to 250,000, what have left (2,750,000) */
  /* So, final dividing */
  var toPresent = 0;
  if (val < 50) {
    toPresent = (val / 50) * 250000;
  } else {
    toPresent = 250000 + (val - 50) / 50 * 2750000;
  };
  toPresent=Math.floor(toPresent);
  return String(toPresent).split("").reverse().join("")
    .replace(/(.{3}\B)/g, "$1,")
    .split("").reverse().join("");
}