Add demo for custom template

custom-template.html

+<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
+<span class="rz-bar-wrapper">
+  <span class="rz-bar rz-selection" ng-style="barStyle"></span>
+</span> <!-- // 1 Highlight between two handles -->
+<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span> <!-- // 2 Left slider handle -->
+<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></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 -->
+<ul ng-show="showTicks" class="rz-ticks"> <!-- // 9 The 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}}" ng-bind-html="t.value"></span>
+  </li>
+</ul>

demo.js

-var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap', 'hljs']);
+var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap', 'hljs', 'ngSanitize']);
 
 app.directive('showCode', function() {
   return {
@@ -197,6 +197,20 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with custom template in order to use HTML formatting for ticks
+  $scope.slider_custom_template = {
+    value: 100,
+    options: {
+      floor: 0,
+      ceil: 500,
+      step: 100,
+      showTicksValues: true,
+      translate: function(value) {
+        return '<b>Price:</b> $' + value;
+      }
+    }
+  };
+
   //Slider config with steps array of letters
   $scope.slider_alphabet = {
     value: 0,

index.html

@@ -177,7 +177,7 @@
   </article>
 
   <article>
-    <h2>Slider with custom display function using html formatting</h2>
+    <h2>Slider with custom display function using HTML formatting</h2>
     <rzslider
       rz-slider-model="slider_translate_html.minValue"
       rz-slider-high="slider_translate_html.maxValue"
@@ -186,6 +186,27 @@
     <show-code js-file="slider_translate_html" html-file="rangeSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Slider with custom template to use HTML formatting for ticks</h2>
+    <rzslider
+      rz-slider-model="slider_custom_template.value"
+      rz-slider-options="slider_custom_template.options"
+      rz-slider-tpl-url="custom-template.html"
+    ></rzslider>
+    <i>* You need to include ngSanitize (angular-sanitize.js) in order to use <a href="https://docs.angularjs.org/api/ng/directive/ngBindHtml" target="_blank">ng-bind-html</a></i><br/>
+    <tabset class="code">
+      <tab heading="HTML">
+        <div hljs hljs-include="'snippets/customTemplateSlider.html'" hljs-language="html"></div>
+      </tab>
+      <tab heading="JS">
+        <div hljs hljs-include="'snippets/slider_custom_template.js'" hljs-language="js"></div>
+      </tab>
+      <tab heading="your-custom-template.html">
+        <div hljs hljs-include="'custom-template.html'" hljs-language="html"></div>
+      </tab>
+    </tabset>
+  </article>
+
   <article>
     <h2>Slider with Alphabet</h2>
     <rzslider
@@ -393,6 +414,7 @@
 
 </body>
 <script src="lib/angular.min.js"></script>
+<script src="lib/angular-sanitize.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
 <script src="lib/highlight.min.js"></script>
 <script src="lib/angular-highlightjs.min.js"></script>

snippets/customTemplateSlider.html

+<rzslider rz-slider-model="slider.value"
+          rz-slider-options="slider.options"
+          rz-slider-tpl-url="your-custom-template.html"></rzslider>

snippets/slider_custom_template.js

+//You need to import the ngSanitize module:
+angular.module('app', ['rzModule', 'ngSanitize']);
+
+
+$scope.slider = {
+  value: 100,
+  options: {
+    floor: 0,
+    ceil: 500,
+    step: 100,
+    showTicksValues: true,
+    translate: function(value) {
+      return '<b>Price:</b> $' + value;
+    }
+  }
+};