Jquery Slider not updating input fields live

Jquery Slider not updating input fields live

Hi I am trying to make a quote generation tool using multiple sliders but for some reason the totals do not update 100% on one slider until you use the other, then vise verser . I have tried many things but am missing something here and hope that someone can help, here is the code:

  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title></title>
  6.   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  7. <script src="http://code.jquery.com/jquery-latest.js"></script>
  8.   <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="/resources/demos/style.css" />
  10.   <script>
  11.   $(document).ready(function(){
  12.   
  13. function update() {
  14.     var ram = $('#ram').slider('value');
  15.     var disk = $('#disk').slider('value');
  16. var ramval = (ram * 0.25);
  17. var diskval = (disk * 0.10);
  18.     var monthly = (ramval + diskval);
  19.     $("#monthly").text(monthly.toFixed(2));
  20. $("#ramres").text(ram.toFixed(0));
  21. $("#diskres").text(disk.toFixed(0));
  22. }

  24. $("#ram").slider({
  25.     value: 0,
  26.     min: 1,
  27.     max: 32,
  28.     step: 1,
  29.     slide: function() {
  30.         update();
  31.     }
  33. });

  35. $("#disk").slider({
  36.     value: 100,
  37.     min: 100,
  38.     max: 1000,
  39.     step: 100,
  40.     slide: function() {
  41.         update();
  42.     }
  44. });
  45. update();
  46. });
  47.   </script>
  48. </head>
  49. <body>
  50. <div style="width:500px; margin-left:200px; float:left;">
  51. <h2>Ram: <span id="ramres">1</span>GB</h2>
  52. <div id="ram"></div>

  54. <h2>Disk Space: <span id="diskres">100</span>GB</h2>
  55. <div id="disk"></div>

  57. <h2>Result</h2>
  58. Total &pound;<span id="monthly">0</span>

  60. </div>
  61. <div style="width:500px; margin-left:200px; float:left;">

  63. </div>
  64. </body>
  65. </html>