title: adding values with sGlide plugin
body: <p>I am trying to add values of three slider bars together. I have a function to add them but no matter where I call the function it breaks the page. Now the values of each slider is counting live but when i load the page i get a NaN for the value of total even if a slider starts at a position other than 0. </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;&lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;meta name="viewport" content="width=560, user-scalable=0;"&gt;
  </code></pre>
  
  <p>
      
      
      </p>
  
  <pre><code>&lt;title&gt;sGlide - working&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="main.css" /&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="sGlide.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      $('#slider1').sGlide({
          'width': 85,
          'height': 60,
          'image': 'img/knob.png',
          //'startAt': 'slider3 o.value',
          'colorStart': '#3333FF',
          'colorEnd': '#000080',
          'buttons': true,
          drag: function(o){
          $('input[type=text][id="amount1"]').val(o.value);
      },
          onButton: function(o){
          $('input[type=text][id="amount1"]').val(o.value);
      }
  
      });
  
      $('#slider2').sGlide({
          'width': 85,
          'height': 60,
          'image': 'img/knob.png',
          //'startAt': 'slider3 o.value',
          'colorStart': '#360',
          'colorEnd': '#693',
          'buttons': true,
          drag: function(o){
          $('input[type=text][id="amount2"]').val(o.value);
      },
          onButton: function(o){
          $('input[type=text][id="amount2"]').val(o.value);
      }
  
      });
  
      $('#slider3').sGlide({
          'width': 85,
          'height': 60,
          'image': 'img/knob.png',
          'startAt': 40,
          'colorStart': '#CC99CC',
          'colorEnd': '#4C1A4C',
          'buttons': true,
          drag: function(o){
          $('input[type=text][id="amount3"]').val(o.value);
      },
          onButton: function(o){
          $('input[type=text][id="amount3"]').val(o.value);
      }
  
      });
  
  
  
  
  function update() {
   $amount1 = $("#slider1").val(o.value);
   $amount2 = $("#slider2").val(o.value);
   $amount3 = $("#slider3").val(o.value);
   $total = $amount1 + $amount2 + $amount3;
   //$("#amount").val($amount1);
   //$("#amount2").val($amount2);
   //$("#amount3").val($amount3);
   $("#total").val($total);
  }
  });
   &lt;/script&gt;
  
  &lt;/head&gt;&lt;body&gt;
  
  &lt;div id="slider1" class="slider_bar"&gt;&lt;/div&gt;&lt;input id="amount1" type="text" /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;div id="slider2" class="slider_bar"&gt;&lt;/div&gt;&lt;input id="amount2" type="text" /&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;div id="slider3" class="slider_bar"&gt;&lt;/div&gt;&lt;input id="amount3" type="text" /&gt;&lt;br /&gt;&lt;br /&gt;
  
   &lt;br /&gt;
   &lt;h3&gt;Total&lt;/h3&gt;
   &lt;input id="total" type="text" /&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>