javascript - noUiSlider 多范围访问第一个句柄

标签 javascript nouislider

我正在尝试构建一个具有多个句柄的 noUiSlider,我可以在其中获取表单提交的各个句柄之间的值。我可以访问所有句柄的值,但不能访问第一个句柄。试图在 console.log 上获取它的 id 没有给我任何帮助。如何访问第一个句柄? 我的例子在这里: Codepen Example

var multirange = document.getElementById("my-slider");
//initialize the slider
noUiSlider.create(multirange, {
  start: [1, 3, 6, 7],
  connect: [true, true, true, true, true],
  tooltips: [true, true, true, true],
  behaviour: "tap-drag",
  step: 0.25,
  range: {
    min: [0],
    max: [8]
  }
});

multirange.noUiSlider.on("update", function(values, handle) {
  var value = values[handle];

  if (handle) {
    //for debugging check the id of the current handle
    console.log(handle);
    //get the id of the corresponding input field
    var inputid = "input-number" + handle;
    //first handle value does not need to be processed further
    if (handle !== 0) {
      //get previous handle id field
      var prvid = handle - 1;
      //get previous handle value
      var prvvalue = values[prvid];
      //difference between current and previous value
      var diffvalue = value - prvvalue;
      var inputNumber = document.getElementById(inputid);
      inputNumber.value = diffvalue;
    } else {
      //first handle value should directly be written into the input field
      inputNumber.value = value;
    }
  }
});

最佳答案

谢谢Alon ,

那是我的错误。 将 if 更改为

if (handle  !== undefined  ) {

现在还捕获了 id 为 0 的句柄

关于javascript - noUiSlider 多范围访问第一个句柄,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52839484/

相关文章:

javascript - Jquery slideToggle 不能与 display none css 一起工作

javascript - 对于 NoUiSlider,如何设置 handle /拇指的宽度?

javascript - jquery noUiSlider 将外部 javascript 变量传递到函数中

javascript - 将隐藏字段值替换为 NoUiSlider 值的值以传递给 PHP 表单

javascript - 无法将 JSON 响应数据分配给 AngularJS 中的 $scope 变量

javascript - 如何在以声明方式创建自定义 Dojo 小部件后检索它们

javascript - 在本地运行js不断出现此错误

javascript - 基于选择字段从 json 文件生成表格

jquery - 将 noUISlider 与 Rails 一起使用

javascript - 用户使用完 slider 后执行函数