Question

我使用NoUISlider ... NoUISlider

效果很好，但是当用户滚动手柄时，我无法同时获得最低价格和最高价格。不管怎么说，只要€（最高价格）改变价值，无论你滚动左手柄还是右手柄。当使用左右手柄时，是否可以显示最低和最高价格值。我不明白我在哪里弄错了。

这是我的BOOTPLY ...... BOOTPLY

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Updated Example

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>

显示最低和最高值的NoUISlider

1 个答案: