title: Angular Material Slider is not rendering correctly
body: <p>I cannot make the Angular Material Slider rendering correctly. My code is as follow:</p>
  
  <pre><code>    &lt;div class="row formField" ng-cloak&gt;
      &lt;div class="col-md-2"&gt;
          &lt;div&gt;送貨日期&lt;/div&gt;
          &lt;div&gt;Delivery Date&lt;/div&gt;
      &lt;/div&gt;
      &lt;md-datepicker ng-model="myDate" md-placeholder="Enter date"&gt;&lt;/md-datepicker&gt;
  &lt;/div&gt;
  &lt;div class="row formField" ng-cloak&gt;
      &lt;div class="col-md-2"&gt;
          &lt;div&gt;進食時間&lt;/div&gt;
          &lt;div&gt;Serving Time&lt;/div&gt;
      &lt;/div&gt;
   &lt;md-content class="md-padding overflow-hidden"&gt;
  &lt;md-slider-container&gt;
    &lt;span&gt;R&lt;/span&gt;
    &lt;md-slider flex="" min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider"&gt;
    &lt;/md-slider&gt;
    &lt;md-input-container&gt;
      &lt;input flex="" type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider"&gt;
    &lt;/md-input-container&gt;
  &lt;/md-slider-container&gt;
  &lt;/md-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the result is like the following, which is far from good.</p>
  
  <p><a href="https://i.stack.imgur.com/ElIQp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ElIQp.png" alt="enter image description here"></a></p>
  
  <p>The weird thing is the datepicker is working perfectly, while the slider is not. Thanks for any guidance.</p>