title: Jquery slider update value on event change
body: <p>I have the following code which I'm using to calculate the price of a service based on the sliders value.</p>
  <p>It works well except the <code>PriceVal</code> doesn't update in real-time. It only updates once the user has lifted the mouse click from the slider.</p>
  <p>Does anyone know how I can get it to update in real-time as the slider slides?</p>
  <p>The page can be viewed at <a href="http://www.voxlogic.net/pricing/" rel="nofollow noreferrer">http://www.voxlogic.net/pricing/</a></p>
  <pre><code>$(function() {
  //document.getElementById(&quot;f1&quot;).reset();
  $(&quot;:range&quot;).rangeinput({ progress: true, max: 100, value:1 });  
  $(&quot;:range&quot;).change(function(){
      var sliderVal = this.value;
      calculatePrice(sliderVal);      
  });
  $(&quot;:range&quot;).keyup(function(){
      var sliderVal = this.value;
      if (sliderVal==&quot;&quot;){
          $(&quot;#priceVal&quot;).html('');
  }
  else
          {
              //check if value is from 1..25 range and correct otherwise
              if (isNaN(sliderVal)){sliderVal=1;}
              if (sliderVal&lt;1){sliderVal=1;}
              if (sliderVal&gt;25){sliderVal=25;}
              this.value = sliderVal;
              calculatePrice(sliderVal);
          }
      });
      
      $(&quot;:range&quot;).keydown(function(){
          var sliderVal = this.value; 
          calculatePrice(sliderVal);      
  });
  });
  
  function calculatePrice(sliderVal){
      if (isNaN(sliderVal)){sliderVal=1;}
      if (sliderVal&lt;1){sliderVal=1;}
      if (sliderVal&gt;25){sliderVal=25;}
      var priceVal;
      if (sliderVal&lt;=9){
          priceVal = sliderVal*6;
      }
      else if ((sliderVal&gt;9)&amp;&amp;(sliderVal&lt;=19)){
          priceVal = 9 * 6 + (sliderVal-9) * 4.5;         
      }
      else if (sliderVal&gt;19){
          priceVal = 9 * 6 + 10 * 4.5 + (sliderVal-19) * 3.6;
      }
      $(&quot;#priceVal&quot;).html('&amp;pound;'+priceVal.toFixed(2));
  }
  });
  </code></pre>