d-md-components/slider/views/index.html

A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).

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