title: Why am I getting NaN on page load on Jquery UI Slider
body: <p>I have a slider which on page load should produce a value in the handles of the slider and also another value for a label.  I can't understand why on page load I get NaN but when I move the sliders, the value appears.</p>
  
  <p>Please take a look so you can see for yourself <a href="http://jsfiddle.net/jonnystudent/VycW2/" rel="nofollow">Fiddle</a></p>
  
  <p>The code looks ok, although, the values don't appear in the handles either on page load.</p>
  
  <pre><code>$("#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('&lt;div class="sliderControl-label v-labelCurrent"&gt;£'+ui.value+'&lt;/div&gt;');
                  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('&lt;div class="sliderControl-label v-labelCurrent"&gt;'+ui.value+'&lt;span class="unit"&gt; days&lt;/span&gt;&lt;/div&gt;');
          $("#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 &gt; 0)
    {
       if (parseInt(data) &gt;= 7 &amp;&amp; parseInt(data) &lt;= 31)
       {
           $("#slider2").slider("option", "value", data);
       }
       else
       {
          if (parseInt(data) &lt; 1)
          {
              $("#days").val("7");
              $("#slider2").slider("option", "value", "7");
          }
          if (parseInt(data) &gt; 31)
          {
              $("#days").val("31");
              $("#slider2").slider("option", "value", "31");
          }
       }
    }
    else
    {
      $("#slider2").slider("option", "value", "7");
    }
    $("#date").text(addDaysToDate(parseInt($("#days").val())));
  });
  
  update();
  </code></pre>