jQuery UI datepicker binding

http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<input id="slid" data-bind="attr: {min: 1, max: MaxPage}, value: CurrPage" type="range"  data-highlight="true">
<hr/>
X1=<span data-bind="text: CurrPage"></span></br>
X2=<span data-bind="text: MaxPage"></span>
<hr>
<button onclick="CallAgain()">Call Again</button>
<button data-bind="click: changeCurrent">Change current</button>

JavaScript

var x1 = 5;
var x2 = 10;
var FirstRun = true;
ko.applyBindings(new ViewModel());
var vm = new ViewModel();
    
function ViewModel () {
    this.CurrPage = ko.observable(x1);
    this.MaxPage = ko.observable(x2);
    
    this.CurrPage.subscribe(function (value) {
        x1 = value;
    });
    this.MaxPage.subscribe(function (value) {
        x2 = value;
    });
    
    this.changeCurrent = function () {
        x1++;
        x2++;
        this.CurrPage(x1);
        this.MaxPage(x2);
        alert( this.CurrPage() );
    }
};
        
        
function CallAgain() {

    x1 = x1 - 2;
    x2 = x2 - 2;
    vm.CurrPage(x1);
    vm.MaxPage(x2);
    vm.changeCurrent();	
    FirstRun = false;
    
}

//ko.applyBindings(new ViewModel());