Handle different values for showTicks and showTicksValues

Close #550.

Author: ValentinH

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 6.3.0 (2017-08-07)
+## Feature
+- Handle different values for `showTicks` and `showTicksValues` (#550).
+
 # 6.2.3 (2017-07-08)
 ## Tooling
 - Add Typescript definition file.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "homepage": "https://github.com/angular-slider/angularjs-slider",
   "authors": [
     "Rafal Zajac <[email protected]>",

demo/demo.js

@@ -8,8 +8,11 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
   $scope.debugSlider = {
     value: 50,
     options: {
+      showTicks: 5,
+      showTicksValues: 10,
       floor: 0,
       ceil: 100,
+      step: 5,
       showSelectionBar: true
     }
   };

dist/rzslider.css

@@ -1,7 +1,7 @@
-/*! angularjs-slider - v6.2.3 - 
+/*! angularjs-slider - v6.3.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 - 
- 2017-07-08 */
+ 2017-08-07 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -1008,7 +1008,7 @@
             tick.tooltip = self.options.ticksTooltip(value);
             tick.tooltipPlacement = self.options.vertical ? 'right' : 'top';
           }
-          if (self.options.showTicksValues) {
+          if (self.options.showTicksValues === true || value % self.options.showTicksValues === 0) {
             tick.value = self.getDisplayValue(value, 'tick-value');
             if (self.options.ticksValuesTooltip) {
               tick.valueTooltip = self.options.ticksValuesTooltip(value);

dist/rzslider.js

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
   "main": "dist/rzslider.js",
   "types": "dist/rzslider.d.ts",

dist/rzslider.min.css

@@ -1012,7 +1012,7 @@
             tick.tooltip = self.options.ticksTooltip(value);
             tick.tooltipPlacement = self.options.vertical ? 'right' : 'top';
           }
-          if (self.options.showTicksValues) {
+          if (self.options.showTicksValues === true || value % self.options.showTicksValues === 0) {
             tick.value = self.getDisplayValue(value, 'tick-value');
             if (self.options.ticksValuesTooltip) {
               tick.valueTooltip = self.options.ticksValuesTooltip(value);

dist/rzslider.min.js

@@ -141,6 +141,30 @@
       expect(lastTick.text()).to.equal('100');
     });
 
+    it('should create the correct number of ticks/values when showTick and showTicksValues' +
+    ' are integers with different values', function() {
+      var sliderConf = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 10,
+          showTicksValues: 20,
+          showTicks: 10
+        }
+      };
+      helper.createSlider(sliderConf);
+      expect(helper.slider.ticks.hasClass('rz-ticks-values-under')).to.be.true;
+      expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(11);
+      expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(6);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[0]);
+      expect(firstTick.text()).to.equal('0');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[1]);
+      expect(secondTick.text()).to.equal('20');
+      var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[5]);
+      expect(lastTick.text()).to.equal('100');
+    });
+
     it('should create the correct number of ticks when ticksArray is used', function() {
       var sliderConf = {
         value: 50,