title: Generate colors between red and green for an input range
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/5533297/color-coding-based-on-number">Color coding based on number</a>  </p>
  </blockquote>
  
  
  
  <p>I want for a user to be able to select from a range from 1-100, where as the numbers become less than 50, the color of the area becomes darker green, and as the color becomes closer to 100, the color becomes more red.</p>
  
  <p>I am trying to make it so that as the range in more towards the center, the color should be close to white (where 50 = full white).</p>
  
  <p>I tried the answer from here: <a href="https://stackoverflow.com/q/340209/561731">Generate colors between red and green for a power meter?</a> to no avail.... 50 ends up being a muddled green... </p>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;span&gt;&lt;span class="value"&gt;50&lt;/span&gt;&lt;input type="range" /&gt;&lt;/span&gt;​
  </code></pre>
  
  <p>And the following javascript: </p>
  
  <pre><code>$(document).on({
      change: function(e) {
  
          var self = this,
              span = $(self).parent("span"),
              val = parseInt(self.value);
          if (val &gt; 100) {
              val = 100;
          }
          else if (val &lt; 0) {
              val = 0;
          }
          $(".value", span).text(val);
          var r = Math.floor((255 * val) / 100),
              g = Math.floor((255 * (100 - val)) / 100),
              b = 0;
          span.css({
              backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
          });
      }
  }, "input[type='range']");​
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/maniator/tKrM9/1/" rel="noreferrer">http://jsfiddle.net/maniator/tKrM9/1/</a></p>
  
  <p>I have tried many different combinations of r,g,b but I really cannot seem to get it right.</p>