Knockoutjs and Jquery UI Slider


How to filter an observable array based on Jquery UI slider using knockoutJs:

Html

<span id="minFare" data-bind="text : minFare"></span> &nbsp;&nbsp;-&nbsp;&nbsp;Rs&nbsp;
<span id="maxFare" data-bind="text : maxFare"></span>
<div id="slider-range"></div>

Js

//Min & Max Slider


function vm()
{
    var self = this;
    self.minFare = ko.observable();
    self.minFare.subscribe(function (newValue) {
       //TODO: Filter, min fare changed
    });

    self.maxFare = ko.observable();
    self.maxFare.subscribe(function (newValue) {
       //TODO: Filter, max fare changed
    });
 }

(function () {
 var vmm = new vm();
 ko.applyBindings(vmm);

 vm.minFare(0);
 vm.maxFare(500);

$("#slider-range").slider({
        range: true,
        min: vm.minFare(),
        max: vm.maxFare(),
        step: 1,
        values: [vm.minFare(), vm.maxFare()],
        slide: function (event, ui) {
            vm.minFare(ui.values[0]);
            vm.maxFare(ui.values[1]);
        }
    });

})();
Advertisements
Tagged with: , ,
Posted in Asp.Net, Jquery UI, KnockoutJS, MVC

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Top Rated

Error: Please make sure the Twitter account is public.

Blog Stats
  • 29,933 hits
%d bloggers like this: