Knockout and jquery ui slider
https://groups.google.com/d/topic/knockoutjs/vQwSSciJMWY/discussion
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/basic/jquery.qtip.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.debug.js"></script>
<div data-bind="jqSlider: value"></div>
<hr/>
Percent: <input data-bind="value: value" />
JavaScript
ko.bindingHandlers.tooltip = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var handle = $(element);
handle.qtip({
content: '0',
position: {
container: handle
}
});
},
update: function(element, valueAccessor, viewModel) {
var handle = $(element);
var value = ko.utils.unwrapObservable(valueAccessor());
handle.qtip('option', 'content.text', value);
}
};
ko.bindingHandlers.jqSlider = {
init: function(element, valueAccessor, allBindingsAccessor) {
var slider = $(element);
$(element).slider(allBindingsAccessor().jqOptions);
var handle = slider.slider().find(".ui-slider-handle").first();
$(handle).attr("data-bind", "tooltip: viewModel.value");
ko.cleanNode($(handle)[0]);
ko.applyBindings(viewModel.value, $(handle)[0]);
ko.utils.registerEventHandler(element, "slidechange", function() {
var observable = valueAccessor();
observable($(element).slider("value"));
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).slider("value", value);
}
};
viewModel = {
value: ko.observable(0)
};
ko.applyBindings(viewModel);