feat(cmbLabel): Add a mergeRangeLabelsIfSame option

In 3afcce95 commit, I changed the behavior of the combined label for range slider. However, this
broke previous implementation, so this commit add an option to configure this feature. The default
behavior is back as previously: If the slider values are the same, the combined label is 'X - X'

Related to #245

CHANGELOG.md

+# 4.0.2 (2016-06-07)
+## Improvement
+- Add a `mergeRangeLabelsIfSame` option (#245).
+
 # 4.0.1 (2016-06-04)
 ## Improvement
 - Add a pointerType arg for the callbacks (onStart, onChange and onEnd) to identify which handle is used (#339).

README.md

@@ -220,7 +220,9 @@ The default options are:
     onStart: null,
     onChange: null,
     onEnd: null,
-    rightToLeft: false
+    rightToLeft: false,
+    boundPointerLabels: true,
+    mergeRangeLabelsIfSame: false
 }
 ````
 
@@ -328,6 +330,10 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
 
 **onlyBindHandles** - _Boolean (defaults to false)_: Set to true to only bind events on slider handles.
 
+**boundPointerLabels** - _Boolean (defaults to true)_: Set to true to keep the slider labels inside the slider bounds.
+
+**mergeRangeLabelsIfSame** - _Boolean (defaults to false)_: Set to true to merge the range labels if they are the same. For instance, if min and max are 50, the label will be "50 - 50" if `mergeRangeLabelsIfSame: false`, else "50".
+
 **onStart** - _Function(sliderId, modelValue, highValue, pointerType)_: Function to be called when a slider update is started. If an id was set in the options, then it's passed to this callback. This callback is called before any update on the model. `pointerType` is either 'min' or 'max' depending on which handle is used.
 
 **onChange** - _Function(sliderId, modelValue, highValue, pointerType)_: Function to be called when rz-slider-model or rz-slider-high change. If an id was set in the options, then it's passed to this callback. `pointerType` is either 'min' or 'max' depending on which handle is used.

bower.json

 {
   "name": "angularjs-slider",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "homepage": "https://github.com/angular-slider/angularjs-slider",
   "authors": [
     "Rafal Zajac <rzajac@gmail.com>",

dist/rzslider.css

-/*! angularjs-slider - v4.0.1 - 
+/*! angularjs-slider - v4.0.2 - 
  (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 - 
- 2016-06-04 */
+ 2016-06-07 */
 .rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

-/*! angularjs-slider - v4.0.1 - 
+/*! angularjs-slider - v4.0.2 - 
  (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 - 
- 2016-06-04 */
+ 2016-06-07 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -66,7 +66,8 @@
       onChange: null,
       onEnd: null,
       rightToLeft: false,
-      boundPointerLabels: true
+      boundPointerLabels: true,
+      mergeRangeLabelsIfSame: false
     };
     var globalOptions = {};
 
@@ -1192,7 +1193,7 @@
           var lowTr = this.getDisplayValue(this.lowValue, 'model'),
             highTr = this.getDisplayValue(this.highValue, 'high'),
             labelVal = '';
-          if (lowTr === highTr) {
+          if (this.options.mergeRangeLabelsIfSame && lowTr === highTr) {
             labelVal = lowTr;
           } else {
             labelVal = this.options.rightToLeft ? highTr + ' - ' + lowTr : lowTr + ' - ' + highTr;

dist/rzslider.min.css

-/*! angularjs-slider - v4.0.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 -  2016-06-04 */
+/*! angularjs-slider - v4.0.2 -  (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 -  2016-06-07 */
 .rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rzslider.with-legend{margin-bottom:40px}.rzslider[disabled]{cursor:not-allowed}.rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}.rzslider span{position:absolute;display:inline-block;white-space:nowrap}.rzslider .rz-base{width:100%;height:100%;padding:0}.rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}.rzslider .rz-bar-wrapper.rz-draggable{cursor:move}.rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}.rzslider .rz-pointer:hover:after{background-color:#fff}.rzslider .rz-pointer.rz-active{z-index:4}.rzslider .rz-pointer.rz-active:after{background-color:#451aff}.rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}.rzslider .rz-bubble.rz-selection{top:16px}.rzslider .rz-bubble.rz-limit{color:#55637d}.rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}.rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}.rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;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}.rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}.rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}.rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}.rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}.rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}.rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}.rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}.rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:22px;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;left:initial}
\ No newline at end of file

package.json

 {
   "name": "angularjs-slider",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
   "main": "dist/rzslider.js",
   "repository": {

src/rzslider.js

@@ -70,7 +70,8 @@
       onChange: null,
       onEnd: null,
       rightToLeft: false,
-      boundPointerLabels: true
+      boundPointerLabels: true,
+      mergeRangeLabelsIfSame: false
     };
     var globalOptions = {};
 
@@ -1196,7 +1197,7 @@
           var lowTr = this.getDisplayValue(this.lowValue, 'model'),
             highTr = this.getDisplayValue(this.highValue, 'high'),
             labelVal = '';
-          if (lowTr === highTr) {
+          if (this.options.mergeRangeLabelsIfSame && lowTr === highTr) {
             labelVal = lowTr;
           } else {
             labelVal = this.options.rightToLeft ? highTr + ' - ' + lowTr : lowTr + ' - ' + highTr;

tests/specs/options-handling-test.js

@@ -667,6 +667,22 @@
         expect(helper.slider.lowValue).to.equal(1);
         expect(helper.slider.highValue).to.equal(3);
       });
+
+      it('should set the correct combined label when range values are the same and mergeRangeLabelsIfSame option is false', function() {
+        helper.scope.slider.options.mergeRangeLabelsIfSame = false;
+        helper.scope.slider.min = 50;
+        helper.scope.slider.max = 50;
+        helper.scope.$digest();
+        expect(helper.slider.cmbLab.text()).to.equal('50 - 50');
+      });
+
+      it('should set the correct combined label when range values are the same and mergeRangeLabelsIfSame option is true', function() {
+        helper.scope.slider.options.mergeRangeLabelsIfSame = true;
+        helper.scope.slider.min = 50;
+        helper.scope.slider.max = 50;
+        helper.scope.$digest();
+        expect(helper.slider.cmbLab.text()).to.equal('50');
+      });
     });
 
     describe('options expression specific - ', function() {
@@ -889,8 +905,9 @@
           }
         };
         helper.createSlider(sliderConf);
-        var expectedDimension = Math.floor(helper.slider.valueToOffset(8) + helper.slider.handleHalfDim);
-        expect(helper.slider.selBar[0].getBoundingClientRect().width).to.equal(expectedDimension);
+        var expectedDimension = Math.floor(helper.slider.valueToOffset(8) + helper.slider.handleHalfDim),
+          actualDimension = Math.floor(helper.slider.selBar[0].getBoundingClientRect().width);
+        expect(actualDimension).to.equal(expectedDimension);
         expect(helper.slider.selBar.css('left')).to.equal(helper.slider.valueToOffset(2) + helper.slider.handleHalfDim + 'px');
       });
 
@@ -939,8 +956,9 @@
         };
         helper.createSlider(sliderConf);
         var expectedDimension = Math.floor(helper.slider.valueToOffset(13)),
+          actualDimension = Math.floor(helper.slider.selBar[0].getBoundingClientRect().width),
           expectedPosition = helper.slider.valueToOffset(10) + helper.slider.handleHalfDim;
-        expect(helper.slider.selBar[0].getBoundingClientRect().width).to.equal(expectedDimension);
+        expect(actualDimension).to.equal(expectedDimension);
         expect(helper.slider.selBar.css('left')).to.equal(expectedPosition + 'px');
       });