CODEWITHSUNDEEP
javascriptangularjsangular-material
Cheung Brian
Cheung Brian

Reputation: 755

Angular Material Slider is not rendering correctly

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.

enter image description here

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

Upvotes: 1

Views: 1200

Answers (2)

Alexei - check Codidact
Alexei - check Codidact

Reputation: 23078

For Angular Material 2, I have directly included theme CDN link:

<link href="https://unpkg.com/@angular/[email protected]/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">

Upvotes: 0

David Ryan
David Ryan

Reputation: 109

It looks like the slider can't see angular-material.css.

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

Upvotes: 2

Related Questions