Angular Material Slider无法正确渲染

Question

I cannot make the Angular Material Slider rendering correctly. My code is as follow:

    <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>

But the result is like the following, which is far from good.

The weird thing is the datepicker is working perfectly, while the slider is not. Thanks for any guidance.

Answer 1

看起来滑块看不到angular-material.css。

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

Answer 2

对于Angular Material 2，我直接包含了主题CDN链接：

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