<div ng-app="MyApp">
  <div ng-controller="AppCtrl">
    <div jq-slider model="sliderValue"></div>
    <p>The slider's value is: <input ng-model="sliderValue"/></p>
  </div>
</div>
#wrapper {
  padding: 6px 12px;
}

var app = angular.module('MyApp', []);
app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.sliderValue = 50;
}]);
app.directive('jqSlider', [function() {
  return {
    restrict: 'A',
    scope: {
      'model': '='
    },
    link: function(scope, elem, attrs) {
      $(elem).slider({
        value: +scope.model,
        slide: function(event, ui) {
          $scope.apply(function() {
            scope.model = 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