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

Question

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

我的最终目标是让它在this page上工作，您可以在其中输入数字并将滑块设置为它，反之亦然，但我无法弄清楚如何使其工作只有一个工具提示。

目前它将滑块中的值完美地插入到CAD文本框中，但我还希望它使用我写的这个函数将其转换为BTC等值数量:(因为noUiSlider的代码太长而无法发布jsfiddle） / p>

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

滑块的代码在这里：

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

您需要添加侦听输入的事件。如果更改滑块，则会影响输入。您可以更改输入，它会影响滑块和其他输入。代码看起来像这样：

Access via SoP syntax:
      333        0.33
Access via AoS syntax:
      333        0.33
Values written via SoP, read via SoP:
      3333       0.3333
Values written via AoS, read via AoS:
      333333     0.333333

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

noUiSlider.create(directionSlider, {
    start: 20,
    connect: [true, false],
    direction: 'ltr',
    range: {
        'min': 2,
        'max': 99.99
    }
});
var cadc = document.getElementById('cadc');
    var btcc = document.getElementById('btcc');
    
    directionSlider.noUiSlider.on('update', function( values, handle ) {
    	cadc.value = directionSlider.noUiSlider.get();
    	cadConvert();
    });
    
    cadc.addEventListener('change', function(){
        directionSlider.noUiSlider.set(this.value);
    	cadConvert();
    });
    btcc.addEventListener('change', function(e){
       directionSlider.noUiSlider.set(this.value*11);
    });
    function cadConvert() {
    	var cad = directionSlider.noUiSlider.get();
    	var cadCalc = cad / 11;
    	document.getElementById("btcc").value = cadCalc;
    
    }

Answer 2

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

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

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