Knockout bootstrap background-color

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="control-group">
    <label class="control-label">Colour</label>
    <div class="controls">
        <div class="input-prepend">
            <span class="add-on"  data-bind="style: { 'backgroundColor' : colour }">
            </span>
            <input class="span2" type="text" data-bind="value: colour, valueUpdate: 'afterkeydown'"/>
        </div>
    </div>
    <label class="control-label">Custom Colour</label>
    <div class="controls">
        <div class="input-prepend">
            <span class="add-on"  data-bind="style: { 'backgroundColor' : customColour }">
            </span>
            <input class="span2" type="text" data-bind="value: customValue, valueUpdate: 'afterkeydown'"/>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    function vm() {
        var self = this;
        self.colour = ko.observable("orange");        
        self.customValue = ko.observable(0);
        self.customColour = ko.computed(function(){
            var result = 'red',
                value = self.customValue();
            if(value >= 20 && value < 30) result = 'yellow';
            else if(value >= 30 && value < 40) result = 'blue';
            else if(value >= 40 && value < 50) result = 'hotpink';  
            else if(value >= 50) result = 'limegreen';              
            return result;
        });
    };
    ko.applyBindings(new vm());
});