JSFiddle - React, Tailwind, and code Playground

HTML

<form id="calculator" method="post">
    
    <table class="tbl_insert">
        <tr>
            <th><label for="amount">Capital :</label></th>
            <td>
            	<input type="range" min="10000" max="7000000" step="500" id="capital_slider" value="120000" size="4" />
                <input type="text" name="capital" id="capital" value="120000" class="field" />
            </td>
        </tr>
        <tr>
           <th><label for="taux">Taux :</label></th>
            <td>
            	<input type="range" min="1" max="5" step="0.05" id="taux_slider" value="2.65" size="4" />
                <input type="text" name="taux" id="taux" value="2.65" class="field" />
            </td>
        </tr>
        <tr>
            <th><label for="annee">Années :</label></th>
            <td>
            	<input type="range" min="5" max="30" step="5" id="annee_slider" value="25" size="4" />
                <input type="text" name="annee" id="annee" value="25" class="field" />
            </td>
        </tr>
        <tr>
            <th><label for="mensualite">Mensualité:</label></th>
            <td>
            	
                <input type="range" min="10" max="10000" step="0.50" id="mensualite_slider" value="547.45" size="4" />
                <input type="text" name="mensualite" id="mensualite" value="547.45" size="4" /> 

            </td>
        </tr>
    </table>
    
</form>

JavaScript

$(document).ready(function(){
	
// mensualité	

$('#mensualite_slider').on('input', function(){
    $('#mensualite').val($('#mensualite_slider').val());
});

$('#mensualite').on('input', function(){
    $('#mensualite_slider').val($('#mensualite').val());
});

// Capital

$('#capital_slider').on('input', function(){
    $('#capital').val($('#capital_slider').val());
});

$('#capital').on('input', function(){
    $('#capital_slider').val($('#capital').val());
});

// Années

$('#annee_slider').on('input', function(){
    $('#annee').val($('#annee_slider').val());
});

$('#annee').on('input', function(){
    $('#annee_slider').val($('#annee').val());
});

// Taux

$('#taux_slider').on('input', function(){
    $('#taux').val($('#taux_slider').val());
});

$('#taux').on('input', function(){
    $('#taux_slider').val($('#taux').val());
});

});


var calcObject = {
	amountNull : '0.00',
	amountTax : '0.00',
	amountMens : '0.00',
	run : function() {
		
		var cptl = $('#capital').val();
		var tx   = $('#taux').val();
		var ann  = $('#annee').val();
		var mens = $('#mensualite').val();
		
		
	var capital = parseFloat(cptl);
    var taux = parseFloat(tx);
	var annee = parseFloat(ann);
	var mensualite = parseFloat(mens);
	
	var mois = annee * 12;
	var tx_a = taux / 100;
	var tx_m = tx_a / 12;
	var tx_m_plusun = tx_m + 1;
	var tx_m_div_par_mois = tx_a / mois;
		
	
        
        if (tx !== '' && ann !== '') 
		{
	
		var result_mens = (capital * tx_m * Math.pow(tx_m_plusun, mois)) / (Math.pow(tx_m_plusun, mois) - 1);
		calcObject.amountMens = Math.round(result_mens*100)/100;
			$('#mensualite').val(parseFloat(calcObject.amountMens).toFixed(2));
		} 
		else 
		{
			$('#mensualite').val(calcObject.amountNull);
			$('#taux').val(calcObject.amountNull);
			$('#annee').val(calcObject.amountNull)
		}
		
	}
};




$(function() {

	$('#capital').keyup(function() {
		calcObject.run();
	});
	
	$('#taux').keyup(function() {
		calcObject.run();
	});
	
	$('#annee').keyup(function()...