title: jquery slider output in real time
body: <p>I have this code: <a href="http://jsfiddle.net/jevniky/m6qJC/1/" rel="nofollow">MyFiddle</a></p>
  
  <p>HMTL</p>
  
  <pre><code>&lt;p&gt;Money: &lt;span id="amountDisp"&gt;500&lt;/span&gt;&lt;div id="amount_slider"&gt;&lt;/div&gt;&lt;/p&gt;&lt;p&gt;Time: &lt;span id="timeDisp"&gt;7&lt;/span&gt;&lt;div id="time_slider"&gt;&lt;/div&gt;&lt;/p&gt;&lt;p&gt;Calculated &lt;span id="result" &gt;545&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(document).ready(function () {
      $("#amount_slider").slider({
          orientation: "horizontal",
          range: false,
          min: 500,
          max: 4999,
          value: 500,
          step: 1,
                  animate: true,
          change: function (event, ui) {
              $("#amount_field").val(ui.value);
              $("#amount").text(ui.value);
              calculate();
          },
                  slide: function (event, ui) {
              $("#amount_field").val(ui.value);
              $("#amountDisp").text(ui.value);
          }
      });
      $("#time_slider").slider({
          orientation: "horizontal",
          range: false,
          min: 7,
          max: 28,
                  step: 7,
          value: 7,
                  animate: true,
          change: function (event, ui) {
              $("#time_field").val(ui.value);
              $("#time").text(ui.value);
              calculate();
          },
                  slide: function (event, ui) {
              $("#time_field").val(ui.value);
              $("#timeDisp").text(ui.value);
          }
      });
      function calculate() {
          var amount = parseInt($("#amount_slider").slider("value"));
          var time = parseInt($("#time_slider").slider("value"));
                  var coeficient = 0;
                  switch(time){
                         case 7: coeficient = 0.09;break;
                         case 14: coeficient = 0.15;break;
                         case 21: coeficient = 0.19;break;
                         case 28: coeficient = 0.25;break;
                         }
          var rate = amount + (amount * coeficient);
          $("#result").text(rate.toFixed(2));
          $("#result_field").val(rate.toFixed(2));
      }
  });
  </code></pre>
  
  <p>1) It basically does what I want. BUT, I'd like to make the "calculated" field (or output) more smooth. So it will change it's value AS I slide. Like the other two outputs above sliders do.</p>
  
  <p>2) And another question is, how to make this for . I mean that the inputs will be entered by user inside of typical form input. And it will also calculate.</p>