<div ng-app="MyApp">
  <div ng-controller="AppCtrl">
    <div id="ng-slider"></div>
    <p>The slider's value is: </p>
  </div>
</div>
#wrapper {
  padding: 6px 12px;
}
var app = angular.module('MyApp', []);
app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.sliderValue = 0;
  // This slider won't work. Something's missing...
  $('#ng-slider').slider({
    slide: function(event, ui) {
      $scope.sliderValue = ui.value;
    }
  });
}]);

External CSS

  1. https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js