d-md-components
Version:
A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).
14 lines (13 loc) • 756 B
HTML
<index: attributes="value labels min max step class">
<div class="d-md-slider{{if class}} {{class}}{{/if}}">
<div class="mdl-slider__container">
<input class="mdl-slider mdl-js-slider is-upgraded" type="range" min="{{min}}" max="{{max}}" value="{{value}}" tabindex="0" step="{{step}}">
<div class="bubble-container">
<div class="bubble" style="left:{{thumbPosition}}%;">{{getLabel(value, labels, min)}}</div>
</div>
<div class="mdl-slider__background-flex">
<div class="mdl-slider__background-lower" style="flex:{{thumbPosition}} 1 0%; background: #8cc34b"></div>
<div class="mdl-slider__background-upper" style="flex:{{100 - thumbPosition}} 1 0%;"></div>
</div>
</div>
</div>