knockout 3.4 jquery-ui slider - jquery-ui-slider

Question

I would like to use jquery ui slider with a knockout observable.
All the examples I find uses knockout 2x and fail when I try with knockout 3.4
Does anyone have an example I could use?
Here is the code I found for knockout 2.x
<div data-bind="foreach: display_timers_for_this_queue().timers">
Timer: <input data-bind="value: timer, valueUpdate: 'afterkeydown'" />
<div style="margin: 2px; height: 30px;" data-bind="slider: timer, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>
</div>
ko.bindingHandlers.slider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().sliderOptions || {};
$(element).slider(options);
ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).slider("destroy");
});
ko.utils.registerEventHandler(element, "slide", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (isNaN(value)) value = 0;
$(element).slider("value", value);
}
};
versions used
jquery-ui-1.12.0
knockout-3.4.0

Answer 1

This is using knockout 3.3.0
<div data-bind="slider: MyObservable,
sliderOptions: {min: 0, max: 100, range: 'min', step: 1,
start: function(){//custom logic},
stop: function(event, ui){//custom logic}}"></div>
ko.bindingHandlers.slider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().sliderOptions || {};
$(element).slider(options);
ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).slider("destroy");
});
ko.utils.registerEventHandler(element, "slide", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (isNaN(value)) value = 0;
//custom logic
$(element).slider("value", value);
}
};