Allow custom templates

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.15 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-05-24 */
+/*! jusas-angularjs-slider - v0.1.15 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-05-25 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar{z-index:0;width:100%;height:100%;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;width:0;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
\ No newline at end of file

rzSliderTpl.html

+<span class="rz-bar"></span> <!-- 0 The slider bar -->
+<span class="rz-bar rz-selection"></span> <!-- 1 Highlight between two handles -->
+<span class="rz-pointer"></span> <!-- 2 Left slider handle -->
+<span class="rz-pointer"></span> <!-- 3 Right slider handle -->
+<span class="rz-bubble rz-limit"></span> <!-- 4 Floor label -->
+<span class="rz-bubble rz-limit"></span> <!-- 5 Ceiling label -->
+<span class="rz-bubble"></span> <!-- 6 Label above left slider handle -->
+<span class="rz-bubble"></span> <!-- 7 Label above right slider handle -->
+<span class="rz-bubble"></span>

rzslider.js

@@ -975,15 +975,10 @@ function throttle(func, wait, options) {
       rzSliderHideLimitLabels: '=?',
       rzSliderAlwaysShowBar: '=?'
     },
-    template:   '<span class="rz-bar"></span>' + // 0 The slider bar
-                '<span class="rz-bar rz-selection"></span>' + // 1 Highlight between two handles
-                '<span class="rz-pointer"></span>' + // 2 Left slider handle
-                '<span class="rz-pointer"></span>' + // 3 Right slider handle
-                '<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
-                '<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
-                '<span class="rz-bubble"></span>' + // 6 Label above left slider handle
-                '<span class="rz-bubble"></span>' + // 7 Label above right slider handle
-                '<span class="rz-bubble"></span>', // 8 Range label when the slider handles are close ex. 15 - 17
+
+    templateUrl: function(elem, attrs) {
+      return attrs.rzSliderTplUrl || '../rzSliderTpl.html'
+    },
 
     link: function(scope, elem, attr)
     {