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

当滑块更改时，它现在可以正常工作，但当页面加载预定义值时，跨度不会从滑块中获取值。

有没有办法添加其他活动，例如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中查看。

用跨度绑定NoUiSlider

1 个答案: