Slider does not support MVVM

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<div id="example">
  <input type="checkbox" data-role="checkwidget" data-bind="value:tmp,events:{click:click,change:change}" />
</div>

JavaScript

var kendo = window.kendo,
      ui = kendo.ui,
      Widget = ui.Widget,
      support = kendo.support,
      ns = ".CheckWidget",
      CHANGE = 'change',
      CLICK = 'click';

    var CheckWidget = Widget.extend({
      events: [CHANGE, CLICK],
      options: {
        name: "CheckWidget", //name of my plug in
      },
      init: function(element, options) {
        var that = this;

        kendo.ui.Widget.fn.init.call(that, element, options);

        that.element.on(CLICK + ns, $.proxy(that._click, that)).on(CHANGE +ns, $.proxy(that._change, that));
      },
      _click: function(e) {
      console.warn("_click");
        var that = this;
        var clonedEventObject = $.extend(true,{}, e);
        var result= this.trigger(CLICK,clonedEventObject);
        console.warn(result);
        
        return result;
      },
      _change: function(e) {
      console.warn("_change");
      console.warn(e.isDefaultPrevented());
      
      return this.trigger(CHANGE,e);
      },
      value:(value)=>{
      const that=this;
      	if(value===undefined){
        	console.warn('getvalue');
        	return that._value;
        }
        
        console.warn('setvalue');
        that._value=value;
      }
    });
    ui.plugin(CheckWidget);

    var viewModel = kendo.observable({
      click: (e) => {
      console.warn("click");
       e.preventDefault();
      },
      change: (e) => {
       console.warn("change");
      }
    });
    kendo.bind($("#example"), viewModel);