add ticksValuesTooltip example

Author: Valentin Hervieu

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Add a `scale` option to fix sliders displayed in an element that uses `transform: scale(0.5)`.
 - Add a `stepsArray` option (#163)
 - Add an `id` option that is passed to the translate function as second arg (#161)
+- Add a `ticksValuesTooltip` option that is used to display a tooltip on the ticks values (requires angular-ui bootstrap).
 
 # 1.1.0 (2015-11-07)
 ## Features

README.md

@@ -122,7 +122,7 @@ The default options are:
     translate: null,
     id: null,
     stepsArray: null,
-    draggableRange: false, 
+    draggableRange: false,
     showSelectionBar: false,
     hideLimitLabels: false,
     readOnly: false,
@@ -186,6 +186,8 @@ $scope.slider = {
 
 **showTicksValues** - _Boolean (defaults to false)_: Set to true to display a tick and  the step value for each step of the slider.
 
+**ticksValuesTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick value is hovered. Set to a function that returns the tooltip content for a given value.
+
 **scale** - _Number (defaults to 1)_: If you display the slider in an element that uses `transform: scale(0.5)`, set the `scale` value to 2 so that the slider is rendered properly and the events are handled correctly.
 
 **onStart** - _Function()_: Function to be called when a slider update is started.
@@ -210,11 +212,11 @@ To force slider to recalculate dimensions, broadcast **reCalcViewDimensions** ev
 
 You can also force redraw with **rzSliderForceRender** event.
 
-At the end of each "slide" slider emits `slideEnded` event. 
+At the end of each "slide" slider emits `slideEnded` event.
 
 ```javascript
 $scope.$on("slideEnded", function() {
-     // user finished sliding a handle 
+     // user finished sliding a handle
 });
 ```
 

demo/demo.js

@@ -89,7 +89,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     options: {
       ceil: 10,
       floor: 0,
-      showTicksValues: true
+      showTicksValues: true,
+      ticksValuesTooltip: function(v) {
+        return 'Tooltip for ' + v;
+      }
     }
   };
 

demo/index.html

@@ -90,7 +90,7 @@ <h2>Slider with ticks</h2>
   </article>
 
   <article>
-    <h2>Slider with ticks and values</h2>
+    <h2>Slider with ticks and values (and tooltips)</h2>
     <rzslider
       rz-slider-model="slider_ticks_values.value"
       rz-slider-options="slider_ticks_values.options"
@@ -200,7 +200,7 @@ <h2>Slider with all options demo</h2>
 
 </body>
 <script src="../bower_components/angular/angular.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
 <script src="../dist/rzslider.js"></script>
 <script src="demo.js"></script>
 </html>

dist/rzslider.js

@@ -48,6 +48,7 @@
         interval: 350,
         showTicks: false,
         showTicksValues: false,
+        ticksValuesTooltip: null,
         scale: 1,
         onStart: null,
         onChange: null,
@@ -123,7 +124,7 @@
       };
     })
 
-    .factory('RzSlider', ['$timeout', '$document', '$window', 'RzSliderOptions', 'rzThrottle', function($timeout, $document, $window, RzSliderOptions, rzThrottle) {
+    .factory('RzSlider', ['$timeout', '$document', '$window', '$compile', 'RzSliderOptions', 'rzThrottle', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
       'use strict';
 
       /**
@@ -360,9 +361,9 @@
           this.options.draggableRange = this.range && this.options.draggableRange;
           this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
 
-          if(this.options.stepsArray) {
+          if (this.options.stepsArray) {
             this.options.floor = 0;
-            this.options.ceil = this.options.stepsArray.length -1;
+            this.options.ceil = this.options.stepsArray.length - 1;
             this.options.step = 1;
             this.customTrFn = function(value) {
               return this.options.stepsArray[value];
@@ -645,11 +646,18 @@
             var value = this.roundStep(this.minValue + i * this.step);
             var selectedClass = this.isTickSelected(value) ? 'selected' : '';
             positions += '<li class="tick ' + selectedClass + '">';
-            if (this.options.showTicksValues)
-              positions += '<span class="tick-value">' + this.getDisplayValue(value) + '</span>';
+            if (this.options.showTicksValues) {
+              var tooltip = '';
+              if (this.options.ticksValuesTooltip) {
+                tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
+              }
+              positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
+            }
             positions += '</li>';
           }
           this.ticks.html(positions);
+          if (this.options.ticksValuesTooltip)
+            $compile(this.ticks.contents())(this.scope);
         },
 
         isTickSelected: function(value) {
@@ -963,14 +971,13 @@
           return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0;
         },
 
-         /**
+        /**
          * Ensure that the position rendered is within the slider bounds, even if the value is not
          *
          * @param {number} val
          * @returns {number}
          */
-        sanitizeOffsetValue: function(val)
-        {
+        sanitizeOffsetValue: function(val) {
           return Math.min(Math.max(val, this.minValue), this.maxValue);
         },