Question

我正在开发一个电子商务项目，该项目具有带两个句柄的价格范围滑块（最小和最大价格过滤器）。我建议使用NoUiSlider。虽然插件没有依赖关系，但我也使用jQuery 3.2.1，如果它们都相关的话。

如何制作价值观＆＃34;坚持＆＃34;他们各自的处理程序？我正在寻找的效果与this webpage上的滑块完全相同。我通过文档进行了扫描，但是找不到任何东西，我认为最接近我认为可能与之相关的是events page。

var handlesSlider = document.getElementById('slider-handles');
var minPrice = document.getElementById('min-price');
var maxPrice = document.getElementById('max-price');
var inputs = [minPrice, maxPrice];

noUiSlider.create(handlesSlider, {
    start: [ 0, 100 ],
    connect: [false, true, false],
    step: 5,
    range: {
        'min': [  0 ],
        'max': [ 100 ]
    },
    format: wNumb({
        decimals: 0,
        thousand: '.',
        prefix: '£',
    }),
});

handlesSlider.noUiSlider.on('update', function( values, handle ) {
    inputs[handle].innerHTML = values[handle];
});

我的min-price和max-price是span元素，但我可以根据需要更改它们。

Answer 1

我有类似的问题。

就我而言，我想使用输入框（而不是工具提示）来显示滑块值。这看起来与您最初使用输入的实现类似。：）

所以我这样解决了：

在HTML中创建两个或更多输入框（为JavaScript添加正确的ID）

<div id="exampleSlider"></div>
<div> 
  <input id="firstInput">
  <input id="secondInput">
</div>

关于JavaScript：
- 创建一个滑块（我在此处附加了示例）：

  var slider = document.getElementById('exampleSlider');

  noUiSlider.create(slider, {
    // This is an example. Customize this slider to your liking. 
    start: [300, 500],
    range: {
      'min': [0],
      'max': [1000]
    },
    format: wNumb({
      thousand: ',',
      decimals: 0,
      to: function (value) {
        return value + ',-';
      },
      from: function (value) {
        return Number(value.replace(',-', ''));
      }
    }),
});

用于处理滑块输入的代码

var firstInput = document.getElementById('firstInput');
var secondInput = document.getElementById('secondInput');
// add additional variables if you have more than two handles...

slider.noUiSlider.on('update', function (values) {
  var handleValue = slider.noUiSlider.get();

  firstInput.value = handleValue[0]
  secondInput.value = handleValue[1]
  // add additional inputs if you have more than two handles...
});

您可以参考我的example code on JSfiddle

NoUISlider - 坚持各自处理者的价值观？

1 个答案: