如何使用noUiSlider在更改時調用函數？

Question

我已經安裝了noUiSlider，我試圖讓它滑動時它調用一個函數來更新第二個輸入文本框。

我的最終目標是讓它像this page一樣工作，您可以在其中鍵入數字，並將滑塊設置爲該滑塊，反之亦然，但我無法弄清楚如何使它只用一個工具提示工作。

目前，它插頭從滑塊到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(); 
} 

滑塊的代碼是在這裏：

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

您需要添加事件listene d到您的輸入。如果更改滑塊，則會影響輸入。您可以更改輸入並影響滑塊和其他輸入。代碼看起來像這樣：

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) { 
 
    \t cadc.value = directionSlider.noUiSlider.get(); 
 
    \t cadConvert(); 
 
    }); 
 
    
 
    cadc.addEventListener('change', function(){ 
 
     directionSlider.noUiSlider.set(this.value); 
 
    \t cadConvert(); 
 
    }); 
 
    btcc.addEventListener('change', function(e){ 
 
     directionSlider.noUiSlider.set(this.value*11); 
 
    }); 
 
    function cadConvert() { 
 
    \t var cad = directionSlider.noUiSlider.get(); 
 
    \t var cadCalc = cad/11; 
 
    \t document.getElementById("btcc").value = cadCalc; 
 
    
 
    }

<link href="https://refreshless.com/noUiSlider/distribute/nouislider.css" rel="stylesheet"/> 
 
<script src="https://refreshless.com/noUiSlider/distribute/nouislider.js"></script> 
 
<div id="slider-direction"></div> 
 
<input id="cadc"> 
 
<input id="btcc">