<!DOCTYPE html>
<html ng-app="party">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<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" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-cloak ng-controller="SliderCtrl as sliderCtrl">
<div class="container">
<h1>Life of the Party Meter</h1>
<h3>How am I doing?</h3>
<div class="row">
<div class="col-sm-4"><strong>Totally Boring</strong></div>
<div class="col-sm-4 col-sm-offset-4"><strong class="pull-right">Totally Awesome</strong></div>
</div>
<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>
</div>
<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>
<script src="script.js"></script>
</body>
</html>
angular.module("party", ["kendo.directives"])
.controller('SliderCtrl', function() {
var sliderCtrl = this;
sliderCtrl.amount = 67;
});
.k-slider {
width:100%;
}