Why do I get NaN for page loading on jQuery UI Slider

Question

I have a slider that when loading the page should give a value in the slider handles, as well as another value for the label. I cannot understand why when I load the page I get NaN, but when I move the sliders, a value appears.

Please take a look so that you can see for yourself Fiddle

The code looks fine, although the values ​​do not appear in the descriptors when the page loads.

$("#slider1").slider({ max:350, min:100, step:10, value:100, animate: 'true', slide: function(event, ui) { $("#amount").val(ui.value); $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>'); update(); } }); function addDaysToDate(days) { var mths = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); var d = new Date(); d.setHours(d.getHours() + (24 * days)); var currD = d.getDate(); var currM = d.getMonth(); var currY = d.getFullYear(); return mths[currM] + " " + currD + ", " + currY; } $("#slider2").slider({ max:30, min:7, value:7, animate: 'true', slide: function(event, ui) { $("#days").val(ui.value); $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'<span class="unit"> days</span></div>'); $("#date").text(addDaysToDate(parseInt($("#days").val()))); update(); }, create: function(event, ui) { $("#date").text(addDaysToDate(parseInt($("#days").val()))); } }); $("#days").val($("#slider2").slider("value")); $("#days").change(function(event) { var data = $("#days").val(); if (data.length > 0) { if (parseInt(data) >= 7 && parseInt(data) <= 31) { $("#slider2").slider("option", "value", data); } else { if (parseInt(data) < 1) { $("#days").val("7"); $("#slider2").slider("option", "value", "7"); } if (parseInt(data) > 31) { $("#days").val("31"); $("#slider2").slider("option", "value", "31"); } } } else { $("#slider2").slider("option", "value", "7"); } $("#date").text(addDaysToDate(parseInt($("#days").val()))); }); update(); 

Answer 1

Initially after;

 $amount1 = $("#amount").val(); 

$amount1 is an empty string.

When you then parseInt($amount1) get NaN not 0 , which then makes the whole NaN expression.

Detecting and handling empty values, for example. $amount1 = parseInt($amount1, 10) || 0;

Answer 2

You must set the value to $('#amount').val(); by default before calling update()

Answer 3

You must make the following changes to

HTML

You should put the default text 100 in <span class="decimal">100</span> , for example

 <div class="loanForm-label">Your loan:</div> <div class="loanForm-totalToBorrow v-number" id="amount"> <span class="dollarSign">£</span> <span class="decimal">100</span> </div> 

JQuery

Here, change all instances of $("#amount").val to $("#amount .decimal").text as

 function update() { $interest = 0.15 ; $perday = 15 ; $amount1 = Number($("#amount .decimal").text()); if($amount1>0){ $dayscount =Number($("#days").val()); $amount2 = $amount1 + $interest * $amount1 + ($dayscount * ($perday/100)); $apr = ((($amount2-$amount1) / $amount1 ) / (($dayscount/365) * 100)) ; $("#amount .decimal").text($amount1); $("#amount2").text($amount2); $("#amount3").text(parseFloat($amount2-$amount1).toFixed(2)); $("#amount4").text(parseFloat($apr).toFixed(2)); } } $("#slider1").slider({ max:350, min:100, step:10, value:100, animate: 'true', slide: function(event, ui) { $("#amount .decimal").text(ui.value); $(this).find('.ui-slider-handle') .html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>'); update(); } }); function addDaysToDate(days) { var mths = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); var d = new Date(); d.setHours(d.getHours() + (24 * days)); var currD = d.getDate(); var currM = d.getMonth(); var currY = d.getFullYear(); return mths[currM] + " " + currD + ", " + currY; } $("#slider2").slider({ max:30, min:7, value:7, animate: 'true', slide: function(event, ui) { $("#days").val(ui.value); $(this).find('.ui-slider-handle') .html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'<span class="unit"> days</span></div>'); $("#date").text(addDaysToDate(parseInt($("#days").val()))); update(); }, create: function(event, ui) { $("#date").text(addDaysToDate(parseInt($("#days").val()))); } }); $("#days").val($("#slider2").slider("value")); $("#days").change(function(event) { var data = $("#days").val(); if (data.length > 0) { if (parseInt(data) >= 7 && parseInt(data) <= 31) { $("#slider2").slider("option", "value", data); } else { if (parseInt(data) < 1) { $("#days").val("7"); $("#slider2").slider("option", "value", "7"); } if (parseInt(data) > 31) { $("#days").val("31"); $("#slider2").slider("option", "value", "31"); } } } else { $("#slider2").slider("option", "value", "7"); } $("#date").text(addDaysToDate(parseInt($("#days").val()))); }); update(); 

Check out this demo.