JS/jQuery finance calculator I am always surprised by JavaScript and how simple and elegant JS code can look.
I have a piece of code below that simulates a finance calculator. Please share your thoughts, critiques/feedback on how the code can be improved.

jsFiddle

The calculation is just a simulation, so please ignore. Also please ignore the way I display currency ($$$).

JavaScript:

$(function () {
 // we need to cache selectors to avoid re-reading the DOM
 var amount = $("#amount"),
     duration = $("#duration"),
     interest = $("#interest"),
     income = $("#incomeNeeded"),
     monthlyRate = $("#monthlyRate");

 var updateIncome = function() {
     var amountVal =amount.val().slice(0, -4), 
         durationVal = duration.val().slice(0, -6), 
         interestVal = interest.val().slice(0, 2);
     var resultIncome = amountVal +'-'+ durationVal +'-'+ interestVal;
     return resultIncome;
 };

 var updateRate = function() {
     var amountVal =amount.val().slice(0, -4), 
         durationVal = duration.val().slice(0, -6), 
         interestVal = interest.val().slice(0, 2);
     var resultRate = amountVal +'-'+ durationVal +'-'+ interestVal;
     return resultRate;
 };

 $("#slider-range-min").slider({
     range: "min",
     value: 10000,
     min: 1,
     max: 20000,
     slide: function (event, ui) {
         $("#amount").val(ui.value + " $$$");

         // seems like we can use either text() or html()
         income.html(updateIncome());
         monthlyRate.html(updateRate());
     }
 });
 $("#amount").val($("#slider-range-min").slider("value") + " $$$");

 $("#duration-range-min").slider({
     range: "min",
     value: 24,
     min: 1,
     max: 70,
     slide: function (event, ui) {
         $("#duration").val(ui.value + " months");
         income.html(updateIncome());
         monthlyRate.html(updateRate());
     }
 });
 $("#duration").val($("#duration-range-min").slider("value") + " months");

 $("#interest-range-min").slider({
     range: "min",
     value: 12,
     min: 4,
     max: 25,
     slide: function (event, ui) {
         $("#interest").val(ui.value + " %");
         income.html(updateIncome());
         monthlyRate.html(updateRate());
     }
 });
 $("#interest").val($("#interest-range-min").slider("value") + " %");
 });


HTML:

&lt;div style="width: 500px;"&gt;
&lt;p&gt;
    &lt;label for="amount"&gt;Max amount:&lt;/label&gt;
    &lt;input type="text" id="amount" class="input1"&gt;
&lt;/p&gt;
&lt;div id="slider-range-min"&gt;&lt;/div&gt;
&lt;p&gt;
    &lt;label for="duration"&gt;duration:&lt;/label&gt;
    &lt;input type="text" id="duration" readonly class="input1"&gt;
&lt;/p&gt;
&lt;div id="duration-range-min"&gt;&lt;/div&gt;
&lt;p&gt;
    &lt;label for="interest"&gt;Interest:&lt;/label&gt;
    &lt;input type="text" id="interest" readonly class="input1"&gt;
&lt;/p&gt;
&lt;div id="interest-range-min"&gt;&lt;/div&gt;
&lt;div style="text-align: center; float: left; width: 49%;"&gt;
    &lt;p&gt;Income needed:&lt;/p&gt;&lt;span id="incomeNeeded" style=""&gt;x&lt;/span&gt;

&lt;/div&gt;
&lt;div style="text-align: center; float: left; width: 49%;"&gt;
    &lt;p&gt;Monthly rate:&lt;/p&gt;&lt;span id="monthlyRate" style=""&gt;x&lt;/span&gt;

&lt;/div&gt;
You have cached the selectors beforehand,

// we need to cache selectors to avoid re-reading the DOM
 var amount = $("#amount"),
     duration = $("#duration"),
     interest = $("#interest"),
     income = $("#incomeNeeded"),
     monthlyRate = $("#monthlyRate");


So why not use them here,

$("#amount").val($("#slider-range-min").slider("value") + " $$$");


and

slide: function (event, ui) {
     $("#amount").val(ui.value + " $$$");


to 

amount.val($("#slider-range-min").slider("value") + " $$$");


and 

slide: function (event, ui) {
     amount.val(ui.value + " $$$");


Repeat similarly for #duraton and #interest.



Also, instead of using .slice(x,y) where x and y are static values, why not use:

.slice(0,amount.val().indexOf(' '))


or use split()  - Fiddle

JSPerf test- split vs slice vs substring