Using HTML5 range sliders with Javascript Event Listener

I am trying to build an HTML5 slider loan calculator using Javascript to display and calculate values on the fly.

The biggest issue is that I am a total rookie when it comes to Javascript.

So I have some code that I am using to display 3 sliders to get the down payment, interest rate, and term for the loan. I have successfully gotten the sliders to behave exactly as I would like, but I am having a lot of trouble calculating the total. I did have it setup to calculate the total by simply passing all of the values to the last block of javascript, but it would not update dynamically. Right now I am just trying to prove that I can get the value of one range slider to update dynamically next to its own slider and below where I plan to display the calculations. I have tried many different things, but I just can't make it work.

Here is the code that I have currently.

<?php

echo '<div class="clearfix" id="finance-calculator">';
echo '<div>Estimate Your Payments</div>';
echo '<div id="finance-sale-price">' . '$' . number_format(($sale_price) , 2 , '.' , ',' ) . '</div>';
echo '<div class="sale-price-label">Sale Price</div>';

echo '<div id="down-block">';
$down_max = ceil($sale_price * 0.9);
$down_init = ceil ($sale_price * 0.2);
echo '<div class="output-label">$<output for="down_slider" id="down">' . $down_init . '</output><p class="value-label">Down Payment</p></div>';
echo '<input type="range" min="0" max="' . $down_max . '" value="' . $down_init . '" id="down-slider" step="1" oninput="outputDown(value)"/>';
echo '<div class="minimum">0%</div>';
echo '<div class="maximum">90%</div>';
echo '<script>';
echo 'function outputDown(downVal) {';
echo 'document.querySelector(\'#down\').value = downVal;';
echo '}';
echo '</script>';
echo '</div>';

echo '<div id="rate-block">';
echo '<div class="output-label"><output for="rate_slider" id="rate">5.9</output>% APR<p class="value-label">Interest Rate</p></div>';
echo '<input type="range" min="0" max="12" value="5.9" id="rate-slider" step="0.1" oninput="outputRate(value)"/>';
echo '<div class="minimum">0%</div>';
echo '<div class="maximum">12%</div>';
echo '<script>';
echo 'function outputRate(rateVal) {';
echo 'document.querySelector(\'#rate\').value = rateVal;';
echo '}';
echo '</script>';
echo '</div>';

echo '<div id="term-block">';
echo '<div class="output-label"><output for="term-slider" id="term">60</output> Months<p class="value-label">Loan Term</p></div>';
echo '<input type="range" min="12" max="84" value="60" id="term-slider" step="12" oninput="outputTerm(value)"/>';
echo '<div class="minimum">12 months</div>';
echo '<div class="maximum">84 months</div>';
echo '<script>';
echo 'function outputTerm(termVal) {';
echo 'document.querySelector(\'#term\').value = termVal;';
echo '}';
echo '</script>';
echo '</div>';

echo '<div id="total-block">';
echo 'Testing';
echo '<script>';
echo 'var jdown = document.getElementById("down");'; // Variable to store dynamic down payment value
echo 'jdown.addEventListener(\'change\', function(){document.write (jdown)}, false);';  // Event listener to update jdown variable when slider above is used. document.write to test. 
echo '</script>';
echo 'Testing';
echo '</div>';


echo '</div>';

?>

This is in php.

A live example of this can be seen at: http://ift.tt/1xYRpME?

Next to the images of the vehicle is some tabbed content. Click on the finance tab and you will see the calculator as it currently is.

I am trying to keep this as simple as possible, but I am just stuck. Any help would be greatly appreciated.

Thank you, Jared