用 span 绑定 NoUiSlider

Question

我使用 NoUiSliders，我想将它与 span 对象绑定。在文档上，他们是这样的：

$('#slider1').Link('lower').to($('#slider1value'));

但是，我想要做的是不显示该值，而是在字典上使用它，并将滑块的值作为键，并从那里获取文本。例如：

var names = ["0":"zero", "1":"one",...]

我不知道这是否可以用 noUiSliders 的 wNumb 来做，我自己用这种方式尝试过：

$( "#slider1" )
  .on("slide set change", function() {
    var value = $( this ).val();
    $( "#slider1value" ).text( names[value] );
  })

当滑块改变时，它像现在一样工作，但是当页面加载预定义值时，span 不会从滑块中获取值。

有没有办法添加另一个事件，例如 initialize 或 load？或者还有其他方法吗？

Answer 1

您可以使用 .Link() 中的第二个参数来执行此操作：

var slider = $('#slider'), target = $('#target');

var names = ['a', 'b', 'c', 'd'];

slider.noUiSlider({
    range: { min: 0, max: 4 },
    start: 1,
    format: wNumb({ decimals: 0 })
});

slider.Link().to(target, function ( value ) {
    $(this).html(names[value]);
});

注意wNumb是用来去掉滑块小数点的，所以滑块值与数组键匹配(0, 1, 2, 3)。

查看实际效果 here。

用 span 绑定 NoUiSlider

Bind NoUiSlider with a span

javascript

jquery

nouislider