jquery-mobile - KnockoutJS - jQuery Mobile Range Slider not updating

Question

I have a observable called foo and then a computed that is interconnected with foo

foo = ko.observable();
bar = ko.computed(function(){
    read: function() {
        var blah = parseFloat(self.foo()),
            qux = blah + 1;

        return qux;
    },
    write: function(value)
    {
        value = parseFloat(value);
        self.foo(value - 1);
    },
});

I have this textfield

<input type="text" name="foo" id="foo" placeholder="Foo" class="border-bottom" data-bind="value: foo"/>

And I have this jQuery Mobile Range Slider

<input class="ratio" type="range" name="slider-percent" min="0.00" max="100.00" data-highlight="true" step="0.1" data-bind="value: bar"/>

and then a debugging markup for KO

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Here are some problems that I have

1. When I update foo textfield, I see that the value of bar changes via the debugging markup but it does not reflect in the actual slider.
2. When I try to move slider around, nothing happens. Neither foo nor bar gets updated.

Is there a way to solve this problems?