如何使用noUiSlider更改时调用函数? [英] How to call a function on change with noUiSlider?

问题描述

我已经安装了 noUiSlider ，我正在尝试制作它，所以当您滑动它时，它会用于更新第二个输入文本框的功能.

I've installed noUiSlider and I am trying to make it so when you slide it it calls a function to update a second input textbox.

我的最终目标是使其像在此页面上一样工作可以键入一个数字，并且将滑块设置为数字，反之亦然，但是我不知道如何仅使用一个工具提示就可以使它起作用.

My end goal is to make it work like on this page where you can type a number and it sets the slider to it or vice versa, but I can't figure out how to make it work with only one tooltip.

当前，它可以将滑块中的值完美地插入到CAD文本框中，但我还希望它使用我编写的以下函数将其转换为BTC等效量:(由于yUiSlider的代码太长，因此无法发布jsfiddle)

Currently it plugs the value from the slider into the CAD textbox perfectly but I also want it to convert it into the BTC equivalent amount using this function I wrote: (cant post a jsfiddle because the code for noUiSlider is too long)

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();
});

推荐答案

您需要添加事件侦听您的输入.如果更改滑块，则会影响输入.而且您可以更改输入，它会影响滑块和其他输入.代码如下:

You need to add event listened to your input. If you changing slider, it affects inputs. And you can change inputs and it affect slider and other inputs. Code looks like that:

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;
    
    }

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

这篇关于如何使用noUiSlider更改时调用函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！