Javascript 角度材质滑块未正确渲染

我无法正确渲染角度材质滑块。我的代码如下：

    <div class="row formField" ng-cloak>
    <div class="col-md-2">
        <div>送貨日期</div>
        <div>Delivery Date</div>
    </div>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</div>
<div class="row formField" ng-cloak>
    <div class="col-md-2">
        <div>進食時間</div>
        <div>Serving Time</div>
    </div>
 <md-content class="md-padding overflow-hidden">
<md-slider-container>
  <span>R</span>
  <md-slider flex="" min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
  </md-slider>
  <md-input-container>
    <input flex="" type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider">
  </md-input-container>
</md-slider-container>
</md-content>
</div>

送貨日期
交货日期
進食時間
服务时间
R

但结果如下所示，这远远不够好

---

奇怪的是，日期选择器工作正常，而滑块工作不正常。感谢您的指导。

滑块似乎看不到angular-material.css

<link rel="stylesheet" type="text/css" href="path/to/angular-material.css">

---

对于Angular Material 2，我直接加入了主题CDN链接：

<link href="https://unpkg.com/@angular/material@2.0.0-beta.8/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">