noUiSlider 点数和范围答案

【问题标题】：noUiSlider pips and rangenoUiSlider 点数和范围
【发布时间】：2020-07-21 16:41:13
【问题描述】：

我用 noUiSlider 做了一个滑块。

HTML：

<!-- Case 1 -->
<div class="slider">
  <div class="range" id="reach_range">900mm ~ 1,700mm</div>
  <div class="ui_slider" id="reachSlider">
    <!-- Slider -->
  </div>
</div>

<!-- Case 2 -->
<div class="slider case2">
  <div class="range" id="reach_range2">900mm ~ 1,700mm</div>
  <div class="ui_slider" id="reachSlider2">
    <!-- Slider -->
  </div>
</div>

脚本：

// 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);
});

在案例 1 中：我设置了“步长：100”，使其每“100mm”移动一次。但是，它只能在 900~1200 范围内工作。所以...我将其更改为案例 2，没有点数。它完美地工作，但它没有向我显示滑块下方的范围。实际上，我想在滑块下显示范围，所以我必须使用点数，如案例 1。

有人可以帮助我吗？ (p.s. 我英语不好。对不起！)

【问题讨论】：

标签： javascript nouislider

【解决方案1】：

您在“案例 1”中定义的 step 仅适用于 900 到 1200 之间，因为您使用的是“非线性”滑块。您可以为每个子范围定义步骤以将其应用到任何地方：

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

或者，您可以将pips 选项的mode 设置为steps：documentation。

【讨论】：