How to call a function on change with noUiSlider?

Question

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.

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

The code for the slider is here:

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

It's a lot easier than this. The correct way to do this is to use the change event. For an element with id Foo and an input field with id Bar

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

In most cases this does the job. Note that the value return is float so you may have to format it, and also that the "end" event can also be used, but end doesn't fire on a click (you can also move the slider by clicking on the bar).

Answer 2

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

Answer 3

For anyone trying to access the jQuery object from inside the event handler for noUiSlider, you can find it in

this.target

For example:

range_slider_event_listener.on('update', function (values, handle, unencoded, tap, positions, noUiSlider) {
    jQuery(this.target).closest('.ssf_range_content').find('.range-filter-fields .min input').val(Math.round(values[0]));
    jQuery(this.target).closest('.ssf_range_content').find('.range-filter-fields .max input').val(Math.round(values[1]));
});