angularjs-slider/demo/directiveInCustomTemplate.html

AngularJS slider directive with no external dependencies. Mobile friendly!.

<div class="rzslider">
  <span class="rz-bar-wrapper rz-left-out-selection">
    <span class=rz-bar></span>
  </span>
  <span class="rz-bar-wrapper rz-right-out-selection">
    <span class=rz-bar></span>
  </span>
  <span class="rz-bar-wrapper"><span class="rz-bar"></span></span>
  <span class="rz-bar-wrapper">
    <span class="rz-bar rz-selection" ng-style="barStyle"></span>
  </span>
  <span class="rz-bar-wrapper">
    <span class="rz-bar rz-restricted" ng-style="restrictionStyle"></span>
  </span>
  <span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span>
  <span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span>
  <span class="rz-bubble rz-limit rz-floor no-label-injection">{{floorLabel}}</span>
  <span class="rz-bubble rz-limit rz-ceil no-label-injection">{{ceilLabel}}</span>
  <span class="rz-bubble no-label-injection"><clickable-label label="modelLabel" /></span>
  <span class="rz-bubble no-label-injection"><clickable-label label="highLabel" /></span>
    <span class="rz-bubble no-label-injection">
      <clickable-label label="modelLabel"/>
        -
      <clickable-label label="highLabel"/>
    </span>
  <ul ng-show="showTicks" class="rz-ticks">
    <li ng-repeat="t in ticks track by $index" class="rz-tick" ng-class="{'rz-selected': t.selected}" ng-style="t.style" ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement="{{t.tooltipPlacement}}" ng-attr-tooltip-append-to-body="{{ t.tooltip ? true : undefined}}">
      <span ng-if="t.value != null" class="rz-tick-value" ng-attr-uib-tooltip="{{ t.valueTooltip }}" ng-attr-tooltip-placement="{{t.valueTooltipPlacement}}">{{ t.value }}</span>
      <span ng-if="t.legend != null" class="rz-tick-legend">{{ t.legend }}</span>
    </li>
  </ul>
</div>