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="alert(x1);">Call Again</button>
<button data-bind="click: changeCurrent">Change current</button>

JavaScript

var x1 = 8,
    x2 = 10;

function CallAgain() {

    alert("AAA");
    var vm = new AppViewModel();
    //if ( FirstRun == true ) ko.applyBindings(vm);
    x1++;
    x2++;
    vm.CurrPage(x1);
    vm.MaxPage(x2);
    vm.changeCurrent();	
    FirstRun = false;
    
}



function ViewModel () {
    this.CurrPage = ko.observable(x1);
    this.MaxPage = ko.observable(x2);
    
    this.CurrPage.subscribe(function (value) {
        x1 = value;
    });
    
    this.changeCurrent = function () {
        x1++;
        x2++;
        this.CurrPage(x1);
        this.MaxPage(x2);
        alert( this.CurrPage() );
        $('#slid').slider("refresh");
    }
};

ko.applyBindings(new ViewModel());