Generate colors between red and green for an input range

Possible Duplicate:
Color coding based on number

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.

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).

I tried the answer from here: Generate colors between red and green for a power meter? to no avail.... 50 ends up being a muddled green...

I have the following html:

<span><span class="value">50</span><input type="range" /></span>​

And the following javascript:

$(document).on({
    change: function(e) {

        var self = this,
            span = $(self).parent("span"),
            val = parseInt(self.value);
        if (val > 100) {
            val = 100;
        }
        else if (val < 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']");​

Fiddle: http://jsfiddle.net/maniator/tKrM9/1/

I have tried many different combinations of r,g,b but I really cannot seem to get it right.