noUiSliderで変更時に関数を呼び出す方法は？

Question

noUiSliderをインストールしました。スライドするときに、2番目の入力テキストボックスを更新する関数を呼び出すようにしています。

私の最終目標は、this pageのように動作させることです。数字を入力してスライダを設定するか、その逆に設定しますが、1つのツールチップのみで動作させる方法はわかりません。

は現在、それは完全に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(); 
} 

スライダーのためのコードは長すぎるここにある：あなたは、イベントlisteneを追加する必要が

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

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">