add the option to use ticksArray as array of objects, with legend and…

… value properties (#662)

same as we do with steps array, but to customize the ticks without limiting the selection steps. 

I know this can be already done with a variety of methods, but AFAIK only with functions. In my case I store these labels in a mongo db, so storing logic is not ideal. Putting those labels in a table of objects without limiting the selection as stepsArray solves both issues, storing and displaying.

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v6.6.1 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2018-06-30 */
+ 2019-02-21 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 ;(function(root, factory) {
@@ -1033,12 +1033,19 @@
           if (this.options.rightToLeft) ticksArray.reverse()
 
           this.scope.ticks = ticksArray.map(function(value) {
+            var legend = null;
+            if (angular.isObject(value)) {
+              legend = value.legend;
+              value = value.value
+            }
+
             var position = self.valueToPosition(value)
 
             if (self.options.vertical) position = self.maxPos - position
 
             var translation = translate + '(' + Math.round(position) + 'px)'
             var tick = {
+              legend: legend,
               selected: self.isTickSelected(value),
               style: {
                 '-webkit-transform': translation,
@@ -1071,7 +1078,7 @@
               }
             }
             if (self.getLegend) {
-              var legend = self.getLegend(value, self.options.id)
+              legend = self.getLegend(value, self.options.id)
               if (legend) tick.legend = legend
             }
             return tick

src/rzslider.js

@@ -1037,12 +1037,19 @@
           if (this.options.rightToLeft) ticksArray.reverse()
 
           this.scope.ticks = ticksArray.map(function(value) {
+            var legend = null;
+            if (angular.isObject(value)) {
+              legend = value.legend;
+              value = value.value
+            }
+
             var position = self.valueToPosition(value)
 
             if (self.options.vertical) position = self.maxPos - position
 
             var translation = translate + '(' + Math.round(position) + 'px)'
             var tick = {
+              legend: legend,
               selected: self.isTickSelected(value),
               style: {
                 '-webkit-transform': translation,
@@ -1075,7 +1082,7 @@
               }
             }
             if (self.getLegend) {
-              var legend = self.getLegend(value, self.options.id)
+              legend = self.getLegend(value, self.options.id)
               if (legend) tick.legend = legend
             }
             return tick

tests/specs/ticks-test.js

@@ -263,6 +263,39 @@
       expect(lastTick.text()).to.equal('100')
     })
 
+    it('should create the correct number of ticks when ticksArray is used as array of objects', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          ticksArray: [
+            { value: 0, legend: 'Bad' },
+            { value: 50, legend: 'Average' },
+            { value: 100, legend: 'Excellent' },
+          ],
+        },
+      }
+      helper.createSlider(sliderConf)
+      expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(3)
+      expect(
+        helper.element[0].querySelectorAll('.rz-tick-value')
+      ).to.have.length(0)
+
+      expect(
+        helper.element[0].querySelectorAll('.rz-tick-legend')
+      ).to.have.length(3)
+      var firstLegend = angular.element(
+        helper.element[0].querySelectorAll('.rz-tick-legend')[0]
+      )
+      expect(firstLegend.text()).to.equal('Bad')
+      var lastLegend = angular.element(
+        helper.element[0].querySelectorAll('.rz-tick-legend')[2]
+      )
+      expect(lastLegend.text()).to.equal('Excellent')
+    })
+
     it('should create the correct number of legend items when getLegend is defined', function() {
       var sliderConf = {
         value: 50,