2016-04-09 14 views
1

Ich kann das Rendern von Angular Material Slider nicht richtig machen. Mein Code ist wie folgt:Angular Material Slider wird nicht richtig rendern

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

Aber das Ergebnis ist wie folgt, was weit von gut ist.

enter image description here

Das Seltsame ist der picker perfekt funktioniert, während der Schieber nicht ist. Danke für jede Anleitung.

Antwort

2

Es sieht so aus, als ob der Schieberegler angular-material.css nicht sehen kann.

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

Für Angular-Material 2, ich habe Link direkt enthalten Thema CDN:

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