Как вызвать функцию при изменении с помощью 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">