Useful Things with Kendo UI Core Slider and AngularJS

The Setup

I have had a few questions about my use of the Kendo slider in Viewnicorn, so I just wanted to take a quick minute and show how easy it is to use it in your application.

I am using Kendo UI Core which is a totally free and open-source version of Kendo UI that comes with an impressive set of components. Not only does Kendo UI Core come with a bunch of useful components, but also it has AngularJS bindings built into it. Double rainbow all the way!

There is the new AngularJS Material Design project that is extremely promising, so definitely keep an eye on that.

Demo Code

The Demo

The Code

The first thing we need to do is to add the appropriate source files to our page. This includes jQuery, AngularJS, and the Kendo UI Core source files. We are including the entire core for this example, but you can also do a custom build where you only include the components that you need.

  <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
  <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.ui.core.min.js"></script>

We will also include the appropriate CSS files.

  <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />

From here we need to include the kendo.directives submodule into our application.

angular.module("party", ["kendo.directives"])
  .controller('SliderCtrl', function() {
    var sliderCtrl = this;
    sliderCtrl.amount = 67;
  });

We are also declaring a controller called SliderCtrl and setting an amount property on it (we will bind to it in just a moment).

And now for the Kendo parts! We are going to add an input to our HTML and grant it super slider powers by adding the kendo-slider attribute to it. This will instantiate the Kendo slider directive; we will then set the range using k-min and k-max.

<div class="form-group">
  <input kendo-slider="" k-min="0" k-max="100" ng-model="sliderCtrl.amount" />
</div>
<h1 class="jumbotron text-center">{{sliderCtrl.amount}}</h1>

And from here it is the standard ng-model song and dance. We are binding the slider to sliderCtrl.amount and then displaying that value in the jumbotron.

You can also call methods when the slider changes using the k-on-change attribute such as k-on-change=”onSliderUpdated(kendoEvent)” which will take care of the $digest cycle for you.

And that is all there is to it! I definitely appreciate having a quality control to use in my applications that is free, open-source, and super simple to set up. As always, I love questions and comments; in fact, a lot of my posts stem from conversations that I have with other developers. Let me know what you think in the comments below. Catch you on the next post!

Resources

Kendo UI Core

Kendo UI Core with AngularJS

Demo Code