显示具有最低和最高值的NoUISlider

NoUISlider with lowest and highest values shown

本文关键字：最高值 NoUISlider 显示      更新时间：2023-09-26

我使用NoUISlider。。。NoUISlider

它工作得很好，但当用户滚动手柄时，我无法同时获得最低价格和最高价格。不知何故，无论你向左或向右滚动手柄，只有欧元（最高价格）会改变价值。当使用左右手柄时，是否可以同时显示最低和最高价格值。我看不出我在哪里犯了错。

这是我的靴子。。。BOOTPLY

完整的工作代码在BOOTPLY中，但在相关代码下面，我认为我犯了错误。

var rangeSlider = document.getElementById('slider-range');
noUiSlider.create(rangeSlider, {
  start: [4000, 10000],
  connect: true,
  range: {
    'min': [2000],
    'max': [10000]
  }
});
var stepSliderValueElement = [
  document.getElementById('slider-range-lower'),
  document.getElementById('slider-range-upper')
];
rangeSlider.noUiSlider.on('update', function(values, handle) {
  stepSliderValueElement.innerHTML = values[handle];
});
<div class="noUi-target noUi-ltr noUi-horizontal noUi-background" id="slider-range"></div>
€ (lowest price) <span class="example-val" id="slider-range-lower"></span>
€ (highest price) <span class="example-val" id="slider-range-upper"></span>

它不起作用，因为stepSliderValueElement是一个元素数组，而您正试图更改该数组的.innerHTML属性。您需要根据values数组中的值更改数组中元素的属性：

由于您只是根据值更改文本，因此您也可以使用.textContent属性，而不是.innerHTML:

更新示例

rangeSlider.noUiSlider.on('update', function(values, handle) {
  stepSliderValueElement[0].textContent = values[0];
  stepSliderValueElement[1].textContent = values[1];
});

工作代码：

var rangeSlider = document.getElementById('slider-range');
noUiSlider.create(rangeSlider, {
  start: [4000, 10000],
  connect: true,
  range: {
    'min': [2000],
    'max': [10000]
  }
});
var stepSliderValueElement = [document.getElementById('slider-range-lower'),
  document.getElementById('slider-range-upper')
];
rangeSlider.noUiSlider.on('update', function(values, handle) {
  stepSliderValueElement[0].textContent = values[0];
  stepSliderValueElement[1].textContent = values[1];
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.js"></script>
<div class="noUi-target noUi-ltr noUi-horizontal noUi-background" id="slider-range"></div>
€ (lowest price) <span class="example-val" id="slider-range-lower"></span>
€ (highest price) <span class="example-val" id="slider-range-upper"></span>

相关文章：