Javascript noUiSlider点数和范围

我用noUiSlider做了一个滑块

Html:

在案例1中： 我设置“步长：100”，使其每隔“100毫米”移动一次。然而，它只能在900~1200范围内工作。 所以我把它改成了案例2，没有PIP。它完美地工作，但它没有显示滑块下方的范围。 实际上，我想显示滑块下的范围，所以我必须使用PIP，如案例1

---

有人能帮我吗？（顺便说一句，我英语不好。对不起！）

您在“案例1”中定义的

步骤只能在900到1200之间工作，因为您使用的是“非线性”滑块。您可以为每个子范围定义步骤，以便在任何地方应用它：

// Case 1
var range_rc_sliders = {
  'min': [900, 100],
  '33%': [1200, 100],
  '66%': [1500, 100],
  'max': [1700]
};

或者，您可以将
pips
选项的
模式设置为
步骤
：

// Case 1
var range_rc_sliders = {
  'min': [900],
  '33%': [1200],
  '66%': [1500],
  'max': [1700]
};
var reachSlider = document.getElementById('reachSlider');
var reach = noUiSlider.create(reachSlider, {
  range: range_rc_sliders,
  start: [900, 1700],
  margin: 100,
  step: 100,
  connect: true,
  pips: {
    mode: 'range',
    density: 33,
    stepped: true
  },
});
reachSlider.noUiSlider.on('update', function(values, handle) {
  var from = Math.ceil(values[0]);
  var to = Math.floor(values[1]);

  var range = from + 'mm ~ ' + to + 'mm';
  $('#reach_range').text(range);
});


//case 2
var reachSlider2 = document.getElementById('reachSlider2');
var reach2 = noUiSlider.create(reachSlider2, {
  start: [900, 1700],
  margin: 100,
  step: 100,
  connect: true,
  range: {
    'min': 900,
    'max': 1700
  }
});
reachSlider.noUiSlider.on('update', function(values, handle) {
  var from = Math.ceil(values[0]);
  var to = Math.floor(values[1]);

  var range = from + 'mm ~ ' + to + 'mm';
  $('#reach_range').text(range);
});

// Case 1
var range_rc_sliders = {
  'min': [900, 100],
  '33%': [1200, 100],
  '66%': [1500, 100],
  'max': [1700]
};