javascript - 在 noUiSlider : Moving the slider by clicking pips now working

Question

我试图通过点击点来移动 slider 。但是，在单击一个点时， slider 会移动到起始位置，而此时它应该移动到单击点的位置。谁能帮忙？

<div id="slider-pips" style="top: 0px; right: 1px; margin: 10px 25px;"></div>

var pipsSlider = document.getElementById('slider-pips');
noUiSlider.create(pipsSlider, {
  range: {
    min: 0,
    max: 100
  },
  start: [50],
  pips: {
    mode: 'count',
    values: 5
  }
});

var pips = pipsSlider.querySelectorAll('.noUi-value');

function clickOnPip() {
  var value = Number(pipsSlider.getAttribute('data-value'));
  pipsSlider.noUiSlider.set(value);
}

for (var i = 0; i < pips.length; i++) {
  pips[i].style.cursor = 'pointer';
  pips[i].addEventListener('click', clickOnPip);
}

演示在这里:https://jsfiddle.net/xfrtho8m/1/

我正在尝试这样实现它: https://refreshless.com/nouislider/examples/#section-click-pips

Answer 1

问题是因为您试图将 slider 的值设置为不存在的 data 属性。

相反，您只需要阅读点击的“pip”的文本并将值设置为该值:

function clickOnPip() {
  var value = parseInt(this.innerText, 10);
  pipsSlider.noUiSlider.set(value);
}

var pipsSlider = document.getElementById('slider-pips');

noUiSlider.create(pipsSlider, {
  range: {
    min: 0,
    max: 100
  },
  start: [50],
  pips: {
    mode: 'count',
    values: 5
  }
});
var pips = pipsSlider.querySelectorAll('.noUi-value');

function clickOnPip() {
  var value = parseInt(this.innerText, 10);
  pipsSlider.noUiSlider.set(value);
}

for (var i = 0; i < pips.length; i++) {
  pips[i].addEventListener('click', clickOnPip);
}

#slider-pips {
  top: 0;
  right: 1px;
  margin: 10px 25px;
}

.noUi-value {
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js"></script>
<div id="slider-pips" style=""></div>