Угловой материал слайдер библиотеки не оказывает явно

Question

скриптов и CSS, загруженные в заголовке:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.min.js" 
     integrity="sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg=" 
     crossorigin="anonymous"> 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 

нг-материал загружается в приложение:

var app = angular.module('app', ['ui.router', 'ngMaterial']); 

Используя ползунок в шаблоне HTML :

<md-slider min="0" max="7" ng-model="rate" aria-label="rate" id="rateSlider"></md-slider> 

Соответствующий контроллер:

app.controller('theController', ['$scope', "$state", 'uiHandler', function ($scope, $state, uiHandler) { 
    var handler = new uiHandler($scope, "html/content/theTemplate.html", true); 

    $scope.showMenu = true; 
    $scope.percentBid = 2.3; 
    $scope.topRate = 6; 
    $scope.rate = 3.2; 
}]); 

Элемент управления отображается в формате HTML, но ни один из элементов на самом деле не отображается. Я могу нажать на них в инспекторе страниц, но я не думаю, что CSS-стили были правильно применены.

Answer 1

Angular Material зависит от нескольких модулей:

• angular (очевидно)
• angular-animate
• angular-aria

Ваш пример не имеет последний. Попробуйте в том числе этой линии:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script> 

Смотрите упрощенный Plunker example.