I am struggling to get the Angular Material Slider to render correctly in my project. Here is the code I have been using:
<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>
However, the output looks quite different from what I expected:
https://i.sstatic.net/ElIQp.png
The strange thing is that the datepicker is functioning perfectly, but the slider is not. Any help or suggestions would be greatly appreciated. Thank you.