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

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
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.
When I try to move slider around, nothing happens. Neither foo nor bar gets updated.
Is there a way to solve this problems?

Answer 1

Here's a working fiddle: http://jsfiddle.net/r7Ruc/1/
There was an extra function() in the computed declaration. If you use both read and write, you should pass an object to computed, not a function.
The code, because of "Links to jsfiddle.net must be accompanied by code."
var CTR = function () {
var self = this;
self.foo = ko.observable();
self.bar = ko.computed({
read: function () {
var blah = parseFloat(self.foo()),
qux = blah + 1;
return qux;
},
write: function (value) {
console.log(value);
value = parseFloat(value);
//self.share(value - 1);
},
});
}
var c = new CTR();
ko.applyBindings(c);