kendo slider - reset value on click event

Question

Is there a way i can reset the value of kendo slider once it is changed. Please see this example code: http://dojo.telerik.com/AKOhe/6

entire code:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <input k-ng-model="width" kendo-slider  />
      </div>
      <button k-ng-click="onClick()" />
    </div>

    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
        $scope.width = 3;
        $scope.onClick= function(){
         $scope.width = 2;
        };
      })
    </script>


  </body>
</html>

How can i reset value of kendo slider on reset button?

Thanks in advance.

score 0 · Answer 1 · answered Oct 29 '15 at 05:43

It is not working because you place the button outside of the controller scope, your code already correct. Try it like

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl" style="margin-bottom:20px;">
        <input k-ng-model="width" kendo-slider="slider"  />
        <button ng-click="onClick()"> reset</button>
      </div>
    </div>

    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
        $scope.width = 3;
        $scope.onClick= function(){
         $scope.width = 2;
        };
      })
    </script>


  </body>
</html>

kendo slider - reset value on click event

1 Answers1