Update range slider afer binding update

Question

I make a range slider using the explained issue here but i have the same problem of one of the comments on the second answer: after update my binding values, it don't update the range slider here is my code:

html:

<div id="slider-range" style="border: 1px solid #787878;" data-bind="slider: range, sliderOptions: { min: minPrice(), max: maxPrice(), step: 1, range:true }">

//flexslider binding handler

 ko.bindingHandlers.slider = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().sliderOptions || {};
            var observable = valueAccessor();

            if (observable().splice) {
                options.range = true;
            }

            options.slide = function (e, ui) {
                observable(ui.values ? ui.values : ui.value);
            };

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).slider("destroy");
            });

            ko.utils.registerEventHandler(element, "slide", function (event, ui) {
                observable(ui.values ? ui.values : ui.value);
            });

            $(element).slider(options);
        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            if (value instanceof Array) {
                var value1 = ko.utils.unwrapObservable(value[0]);
                var value2 = ko.utils.unwrapObservable(value[1]);
                if (value1) {
                    value = [value1, value2];
                }
                else value = 0;
            }
            else if (isNaN(value)) value = 0;
            $(element).slider(value.slice ? "values" : "value", value);
            //  $(element).slider(value.slice ? "values" : "value", value);
        }
    };

my viewmodel:

function viewmodel() {
self.minPrice = ko.observable(0);
        self.maxPrice = ko.observable(2000);
self.range= ko.observableArray([self.minPrice(), self.maxPrice()]);
};

when I apply an $ajax request, i reload my data with a function like this:

 self.loadDataFromServer = function (data) {

            self.minPrice(data.minPrice);
            self.maxPrice(data.maxPrice);
            self.range([self.minPrice(), self.maxPrice()]);

        }

but the page don't update the range.I 'll apretiate some help.

score 0 · Accepted Answer · edited May 23 '17 at 12:03

I Found the answer on another question here

change the update part with this:

 update: function (element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).slider(value.slice ? "values" : "value", value);
            $(element).slider("option", allBindingsAccessor().sliderOptions)
        }

an upated example here

Update range slider afer binding update

1 Answers1