javascript - 如何使用 noUiSlider 调用更改函数？

Question

我已经安装了noUiSlider我试图做到这一点，因此当您滑动它时，它会调用一个函数来更新第二个输入文本框。

我的最终目标是让它像this page一样工作您可以在其中输入一个数字，然后将 slider 设置为该数字，反之亦然，但我不知道如何使其仅使用一个工具提示即可工作。

目前，它将 slider 中的值完美地插入到 CAD 文本框中，但我也希望它使用我编写的这个函数将其转换为 BTC 等值金额:(无法发布 jsfiddle，因为 noUiSlider 的代码太长)

function cadConvert() {
var cad = document.getElementById("cadc").value;
var cadCalc = cad / price;
var cadCalc = cadCalc.toFixed(8);
document.getElementById("btcc").value = cadCalc;
cadCheck();
}

slider 的代码在这里:

var directionSlider = document.getElementById('slider-direction');

noUiSlider.create(directionSlider, {
    start: 20,
    connect: [true, false],
    direction: 'ltr',
    range: {
        'min': 2,
        'max': 99.99
    }
});


var inputFormat = document.getElementById('cadc');

directionSlider.noUiSlider.on('update', function( values, handle ) {
    inputFormat.value = values[handle];
cadConvert();
});

directionSlider.addEventListener('change', function(){
    sliderFormat.noUiSlider.set(this.value);
cadConvert();
});

Answer 1

这比这容易得多。正确的方法是使用更改事件。对于 id 为 Foo 的元素和 id 为 Bar 的输入字段

$('#Foo')[0].noUiSlider.on('change',function(v,handle){
    $('#Bar').text(v);
});

在大多数情况下，这可以完成工作。请注意，返回的值是浮点型，因此您可能必须对其进行格式化，并且还可以使用“end”事件，但 end 不会在单击时触发(您也可以通过单击栏来移动 slider ) .