feat(ticks): Add legend support.

This feature enables to display legend under each slider tick.

Author: ValentinH

README.md

@@ -187,6 +187,7 @@ The default options are:
     minRange: 0,
     id: null,
     translate: null,
+    getLegend: null,
     stepsArray: null,
     draggableRange: false,
     draggableRangeOnly: false,
@@ -257,9 +258,22 @@ $scope.slider = {
 };
 ```
 
+**getLegend** - _Function(value, sliderId)_: Use to display legend under ticks. The function will be called with each tick value and returned content will be displayed under the tick as a legend. If the returned value is null, then no legend is displayed under the corresponding tick.
+> In order to get enough space to display legends under the slider, you need to add the `with-legend` class to the slider component. The default margin-bottom is then 40px which is enough for legends that are displayed on 2 lines. If you need more, simply override the style for the class.
+
 **id** - _Any (defaults to null)_: If you want to use the same `translate` function for several sliders, just set the `id` to anything you want, and it will be passed to the `translate(value, sliderId)` function as a second argument.
 
-**stepsArray** - _Array_: If you want to display a slider with non linear/number steps. Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` value will be the index of the selected item in the stepsArray.
+**stepsArray** - _Array_: If you want to display a slider with non linear/number steps.
+Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` value will be the index of the selected item in the stepsArray.
+
+`stepsArray` can also be an array of objects like:
+
+```js
+[
+  {value: 'A'}, // the display value will be *A*
+  {value: 10, legend: 'Legend for 10'} // the display value will be 10 and a legend will be displayed under the corresponding tick.
+]
+```
 
 **draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar. *Applies to range slider only.*
 

demo/demo.js

@@ -116,10 +116,10 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
   $scope.slider_floor_ceil_rtl = {
     value: 12,
     options: {
-    floor: 10,
-    ceil: 100,
-    step: 5,
-    rightToLeft: true
+      floor: 10,
+      ceil: 100,
+      step: 5,
+      rightToLeft: true
     }
   }
 
@@ -257,6 +257,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with ticks values and legend
+  $scope.slider_ticks_legend = {
+    value: 5,
+    options: {
+      ceil: 10,
+      floor: 0,
+      showTicksValues: true,
+      stepsArray: [
+        {value: 1, legend: 'Very poor'},
+        {value: 2},
+        {value: 3, legend: 'Fair'},
+        {value: 4},
+        {value: 5, legend: 'Average'},
+        {value: 6},
+        {value: 7, legend: 'Good'},
+        {value: 8},
+        {value: 9, legend: 'Excellent'}
+      ]
+    }
+  };
+
   //Slider with draggable range
   $scope.slider_draggable_range = {
     minValue: 1,

demo/index.html

@@ -195,6 +195,15 @@ <h2>Slider with ticks and values at intermediate positions</h2>
       rz-slider-model="slider_ticks_values_at.value"
       rz-slider-options="slider_ticks_values_at.options"
     ></rzslider>
+    <br><br>
+  </article>
+
+  <article>
+    <h2>Slider with ticks values and legend</h2>
+    <rzslider class="with-legend"
+      rz-slider-model="slider_ticks_legend.value"
+      rz-slider-options="slider_ticks_legend.options"
+    ></rzslider>
   </article>
 
   <article>

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.12.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-04-22 */
+ 2016-04-24 */
 rzslider {
   position: relative;
   display: inline-block;
@@ -15,6 +15,10 @@ rzslider {
           user-select: none;
 }
 
+rzslider.with-legend {
+  margin-bottom: 40px;
+}
+
 rzslider[disabled] {
   cursor: not-allowed;
 }
@@ -159,6 +163,14 @@ rzslider .rz-ticks .rz-tick .rz-tick-value {
   transform: translate(-50%, 0);
 }
 
+rzslider .rz-ticks .rz-tick .rz-tick-legend {
+  position: absolute;
+  top: 24px;
+  max-width: 50px;
+  white-space: normal;
+  transform: translate(-50%, 0);
+}
+
 rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
   top: initial;
   bottom: -40px;
@@ -234,6 +246,14 @@ rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
   transform: translate(0, -28%);
 }
 
+rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend {
+  top: initial;
+  right: 24px;
+  max-width: none;
+  white-space: nowrap;
+  transform: translate(0, -28%);
+}
+
 rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
   right: 12px;
   bottom: initial;

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.12.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-04-22 */
+ 2016-04-24 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -34,6 +34,7 @@
       minRange: 0,
       id: null,
       translate: null,
+      getLegend: null,
       stepsArray: null,
       draggableRange: false,
       draggableRangeOnly: false,
@@ -424,37 +425,58 @@
 
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
         this.scope.showTicks = this.options.showTicks; //scope is used in the template
-        if(angular.isNumber(this.options.showTicks))
+        if (angular.isNumber(this.options.showTicks))
           this.intermediateTicks = true;
 
         this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
           || this.options.showSelectionBarFromValue !== null;
 
         if (this.options.stepsArray) {
-          this.options.floor = 0;
-          this.options.ceil = this.options.stepsArray.length - 1;
-          this.options.step = 1;
-          if (this.options.translate) {
+          this.parseStepsArray();
+        } else {
+          if (this.options.translate)
             this.customTrFn = this.options.translate;
-          }
-          else {
+          else
             this.customTrFn = function(value) {
-              return this.options.stepsArray[value];
+              return String(value);
             };
+
+          if (this.options.getLegend) {
+            this.getLegend = this.options.getLegend;
           }
-        } else if (this.options.translate)
-          this.customTrFn = this.options.translate;
-        else
-          this.customTrFn = function(value) {
-            return String(value);
-          };
+        }
 
         if (this.options.vertical) {
           this.positionProperty = 'bottom';
           this.dimensionProperty = 'height';
         }
       },
 
+      parseStepsArray: function() {
+        this.options.floor = 0;
+        this.options.ceil = this.options.stepsArray.length - 1;
+        this.options.step = 1;
+
+        if (this.options.translate) {
+          this.customTrFn = this.options.translate;
+        }
+        else {
+          this.customTrFn = function(index) {
+            var step = this.options.stepsArray[index];
+            if (angular.isObject(step))
+              return step.value;
+            return step;
+          };
+        }
+
+        this.getLegend = function(index) {
+          var step = this.options.stepsArray[index];
+          if (angular.isObject(step))
+            return step.legend;
+          return null;
+        };
+      },
+
       /**
        * Resets slider
        *
@@ -558,7 +580,7 @@
         else
           this.selBar.removeClass('rz-draggable');
 
-        if(this.intermediateTicks && this.options.showTicksValues)
+        if (this.intermediateTicks && this.options.showTicksValues)
           this.ticks.addClass('rz-ticks-values-under');
       },
 
@@ -768,7 +790,7 @@
       updateTicksScale: function() {
         if (!this.options.showTicks) return;
         var step = this.step;
-        if(this.intermediateTicks)
+        if (this.intermediateTicks)
           step = this.options.showTicks;
         var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
         this.scope.ticks = [];
@@ -793,6 +815,11 @@
               tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
             }
           }
+          if (this.getLegend) {
+            var legend = this.getLegend(value, this.options.id);
+            if (legend)
+              tick.legend = legend;
+          }
           if (!this.options.rightToLeft) {
             this.scope.ticks.push(tick);
           } else {
@@ -1458,7 +1485,7 @@
           newValue = ceilValue;
         } else {
           newValue = this.offsetToValue(newOffset);
-          if(fromTick && angular.isNumber(this.options.showTicks))
+          if (fromTick && angular.isNumber(this.options.showTicks))
             newValue = this.roundStep(newValue, this.options.showTicks);
           else
             newValue = this.roundStep(newValue);
@@ -1911,7 +1938,7 @@
   'use strict';
 
   $templateCache.put('rzSliderTpl.html',
-    "<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-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\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></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></li></ul>"
+    "<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-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\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></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>"
   );
 
 }]);

dist/rzslider.min.css

@@ -15,7 +15,8 @@
       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>
+          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>