0

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

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

有没有办法添加另一个事件，比如initializeor load？或者有没有其他方法可以做到这一点？

4

1 回答 1

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) 匹配。

在这里查看它的实际应用。

于 2015-01-11T09:12:02.413 回答