how to change jquery range slider min and max values in knockout?

Question

I am trying to bind jQuery UI Slider to my model and I want to change it's min and max value on my min and max fare change.

For example, if:

minFare = 0, maxFare = 100

then:

slider {min:0,max:100,values:[20,30],range:true}

on re-compute or on change:

minFare = 20, maxFare = 80

then:

slider {min:20,max:80,values:[20,30],range:true}

$(function () {


        //Custom binging for jquery ui range slider
        ko.bindingHandlers.RangeSlider = {

            init: function (element, valueAccessor, allBindingsAccessor) {
                var options = valueAccessor() || {};
                var others = allBindingsAccessor() || {};
                options.change = function (e, ui) {
                    others.MinVal(ui.values[0]);
                    others.MaxVal(ui.values[1]);
                }
                others.change = function () { }
                $(element).slider(options);
            }
        };



        function Result(WSRObj) {
            var self = this;
            self.Airline = WSRObj.Segment[0].Airline;
            self.DepTime = WSRObj.Segment[0].DepTIme.substr(11, 5);
            self.ArrTime = WSRObj.Segment[0].ArrTime.substr(11, 5);
            self.Fare = ko.observable(parseInt(WSRObj.Fare.OfferedFare));
        }

        function SRVM() {
            var self = this;

            self.ArrTime = ko.observable(0);
            self.DepTime = ko.observable(1440);
            //fare range
            self.MinFare = ko.observable(0);
            self.MaxFare = ko.observable(100000);

            self.Results = ko.observableArray([]);
            self.addResult = function (result) {self.Results.push(new Result(result)); };
            self.removeResult = function (result) { self.Results.remove(result) };
            self.losdResponce = function () {

                $.ajax({
                    dataType: "json",
                    url: "responce.json",
                    data: "",
                    success: function (data) {
                        var WSSRes = data;
                        var AllResult = (WSSRes.Result !== undefined) ? WSSRes.Result : [];
                        for (var result in AllResult) {
                            var resobj = AllResult[result];
                            var fare = parseInt(resobj.Fare.OfferedFare);
                            var min = self.MinFare(); var max = self.MaxFare();
                            if (result == 0) { min = fare; max = fare; }
                            self.MinFare(min > fare ? fare : min);
                            self.MaxFare(max < fare ? fare : max);
                            self.addResult(resobj);
                        }

                    }
                });
            }

        }




        ko.applyBindings(new SRVM());





    });

Answer 1

Extend your custom binding handler

    ko.bindingHandlers.RangeSlider = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = valueAccessor() || {};
            var others = allBindingsAccessor() || {};
            options.change = function (e, ui) {
                others.MinVal(ui.values[0]);
                others.MaxVal(ui.values[1]);
            }
            others.change = function () { }
            $(element).slider(options);
        },
        update: function (element, valueAccessor) {
            var options = ko.utils.unwrapObservable(valueAccessor()) || {},
                min = ko.utils.unwrapObservable(options.min),
                max = ko.utils.unwrapObservable(options.max);

            $(element).slider('option', 'min', min);
            $(element).slider('option', 'max', max);
        }
    };

I'm assuming you're binding against observable settings, or at least the min and max in your settings should be observable:

var vm = function () {
    this.options = ko.observable({
        min: ko.observable(10),
        max: ko.observable(100)
    });
};

<div data-bind="RangeSlider: options"></div>