Merge pull request #333 from angular-slider/maxRange-option

feat(maxRange): Add a maxRange option

README.md

@@ -186,9 +186,10 @@ The default options are:
     ceil: null, //defaults to rz-slider-model
     step: 1,
     precision: 0,
-    minRange: 0,
     minLimit: null,
     maxLimit: null,
+    minRange: null,
+    maxRange: null,
     id: null,
     translate: null,
     getLegend: null,
@@ -231,12 +232,14 @@ The default options are:
 
 **precision** - _Number (defaults to 0)_: The precision to display values with. The `toFixed()` is used internally for this.
 
-**minRange** - _Number (defaults to 0)_: The minimum range authorized on the slider. *Applies to range slider only.*
-
 **minLimit** - _Number (defaults to null)_: The minimum value authorized on the slider.
 
 **maxLimit** - _Number (defaults to null)_: The maximum value authorized on the slider.
 
+**minRange** - _Number (defaults to null)_: The minimum range authorized on the slider. *Applies to range slider only.*
+
+**maxRange** - _Number (defaults to null)_: The minimum range authorized on the slider. *Applies to range slider only.*
+
 **translate** - _Function(value, sliderId, label)_: Custom translate function. Use this if you want to translate values displayed on the slider.
 `sliderId` can be used to determine the slider for which we are translating the value. `label` is a string that can take the following values:
   - *'model'*: the model label

demo/demo.js

@@ -17,7 +17,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
-  //Range slider with minRange config
+  //Range slider with minLimit and maxLimit config
   $scope.minMaxLimitSlider = {
     value: 50,
     options: {
@@ -29,15 +29,16 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
-  //Range slider with minRange config
-  $scope.minRangeSlider = {
-    minValue: 10,
-    maxValue: 90,
+  //Range slider with minRange and maxRange config
+  $scope.minMaxRangeSlider = {
+    minValue: 40,
+    maxValue: 60,
     options: {
       floor: 0,
       ceil: 100,
       step: 1,
-      minRange: 10
+      minRange: 10,
+      maxRange: 50
     }
   };
 

demo/index.html

@@ -45,11 +45,11 @@
   </article>
 
   <article>
-    <h2>Range slider with minimum range of 10</h2>
+    <h2>Range slider with minimum range of 10 and maximum of 50</h2>
     <rzslider
-      rz-slider-model="minRangeSlider.minValue"
-      rz-slider-high="minRangeSlider.maxValue"
-      rz-slider-options="minRangeSlider.options"
+      rz-slider-model="minMaxRangeSlider.minValue"
+      rz-slider-high="minMaxRangeSlider.maxValue"
+      rz-slider-options="minMaxRangeSlider.options"
     ></rzslider>
   </article>
 

dist/rzslider.js

@@ -31,7 +31,8 @@
       ceil: null, //defaults to rz-slider-model
       step: 1,
       precision: 0,
-      minRange: 0,
+      minRange: null,
+      maxRange: null,
       minLimit: null,
       maxLimit: null,
       id: null,
@@ -1758,11 +1759,11 @@
 
         newValue = this.applyMinMaxLimit(newValue);
         if (this.range) {
-          newValue = this.applyMinRange(newValue);
+          newValue = this.applyMinMaxRange(newValue);
           /* This is to check if we need to switch the min and max handles */
           if (this.tracking === 'rzSliderModel' && newValue > this.scope.rzSliderHigh) {
             if (this.options.noSwitching && this.scope.rzSliderHigh !== this.minValue) {
-              newValue = this.applyMinRange(this.scope.rzSliderHigh);
+              newValue = this.applyMinMaxRange(this.scope.rzSliderHigh);
             }
             else {
               this.scope[this.tracking] = this.scope.rzSliderHigh;
@@ -1777,7 +1778,7 @@
             valueChanged = true;
           } else if (this.tracking === 'rzSliderHigh' && newValue < this.scope.rzSliderModel) {
             if (this.options.noSwitching && this.scope.rzSliderModel !== this.maxValue) {
-              newValue = this.applyMinRange(this.scope.rzSliderModel);
+              newValue = this.applyMinMaxRange(this.scope.rzSliderModel);
             }
             else {
               this.scope[this.tracking] = this.scope.rzSliderModel;
@@ -1806,17 +1807,16 @@
 
       applyMinMaxLimit: function(newValue) {
         if (this.options.minLimit != null && newValue < this.options.minLimit)
-          return this.options.minLimit
+          return this.options.minLimit;
         if (this.options.maxLimit != null && newValue > this.options.maxLimit)
-          return this.options.maxLimit
+          return this.options.maxLimit;
         return newValue;
       },
 
-      applyMinRange: function(newValue) {
-        if (this.options.minRange !== 0) {
-          var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
-            difference = Math.abs(newValue - oppositeValue);
-
+      applyMinMaxRange: function(newValue) {
+        var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
+          difference = Math.abs(newValue - oppositeValue);
+        if (this.options.minRange != null) {
           if (difference < this.options.minRange) {
             if (this.tracking === 'rzSliderModel')
               return this.scope.rzSliderHigh - this.options.minRange;
@@ -1824,6 +1824,14 @@
               return this.scope.rzSliderModel + this.options.minRange;
           }
         }
+        if (this.options.maxRange != null) {
+          if (difference > this.options.maxRange) {
+            if (this.tracking === 'rzSliderModel')
+              return this.scope.rzSliderHigh - this.options.maxRange;
+            else
+              return this.scope.rzSliderModel + this.options.maxRange;
+          }
+        }
         return newValue;
       },
 

src/rzslider.js

@@ -35,7 +35,8 @@
       ceil: null, //defaults to rz-slider-model
       step: 1,
       precision: 0,
-      minRange: 0,
+      minRange: null,
+      maxRange: null,
       minLimit: null,
       maxLimit: null,
       id: null,
@@ -1762,11 +1763,11 @@
 
         newValue = this.applyMinMaxLimit(newValue);
         if (this.range) {
-          newValue = this.applyMinRange(newValue);
+          newValue = this.applyMinMaxRange(newValue);
           /* This is to check if we need to switch the min and max handles */
           if (this.tracking === 'rzSliderModel' && newValue > this.scope.rzSliderHigh) {
             if (this.options.noSwitching && this.scope.rzSliderHigh !== this.minValue) {
-              newValue = this.applyMinRange(this.scope.rzSliderHigh);
+              newValue = this.applyMinMaxRange(this.scope.rzSliderHigh);
             }
             else {
               this.scope[this.tracking] = this.scope.rzSliderHigh;
@@ -1781,7 +1782,7 @@
             valueChanged = true;
           } else if (this.tracking === 'rzSliderHigh' && newValue < this.scope.rzSliderModel) {
             if (this.options.noSwitching && this.scope.rzSliderModel !== this.maxValue) {
-              newValue = this.applyMinRange(this.scope.rzSliderModel);
+              newValue = this.applyMinMaxRange(this.scope.rzSliderModel);
             }
             else {
               this.scope[this.tracking] = this.scope.rzSliderModel;
@@ -1810,17 +1811,16 @@
 
       applyMinMaxLimit: function(newValue) {
         if (this.options.minLimit != null && newValue < this.options.minLimit)
-          return this.options.minLimit
+          return this.options.minLimit;
         if (this.options.maxLimit != null && newValue > this.options.maxLimit)
-          return this.options.maxLimit
+          return this.options.maxLimit;
         return newValue;
       },
 
-      applyMinRange: function(newValue) {
-        if (this.options.minRange !== 0) {
-          var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
-            difference = Math.abs(newValue - oppositeValue);
-
+      applyMinMaxRange: function(newValue) {
+        var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
+          difference = Math.abs(newValue - oppositeValue);
+        if (this.options.minRange != null) {
           if (difference < this.options.minRange) {
             if (this.tracking === 'rzSliderModel')
               return this.scope.rzSliderHigh - this.options.minRange;
@@ -1828,6 +1828,14 @@
               return this.scope.rzSliderModel + this.options.minRange;
           }
         }
+        if (this.options.maxRange != null) {
+          if (difference > this.options.maxRange) {
+            if (this.tracking === 'rzSliderModel')
+              return this.scope.rzSliderHigh - this.options.maxRange;
+            else
+              return this.scope.rzSliderModel + this.options.maxRange;
+          }
+        }
         return newValue;
       },
 

tests/specs/keyboard-controls/specific-test.js

@@ -127,6 +127,53 @@
       expect(helper.scope.slider.max).to.equal(56);
     });
 
+    it('should not be modified by keyboard if new range is above maxRange', function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          maxRange: 10
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+      //try to move minH left
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.min).to.equal(45);
+
+      //try to move maxH right
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'RIGHT');
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+
+    it('should be modified by keyboard if new range is below maxRange', function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          maxRange: 10
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+
+      //try to move minH right
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(46);
+
+      //try to move maxH left
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'LEFT');
+      expect(helper.scope.slider.max).to.equal(54);
+    });
+
     it('should be modified by keyboard if new value is above minLimit', function() {
       var sliderConf = {
         value: 10,
@@ -327,6 +374,55 @@
       helper.pressKeydown(helper.slider.maxH, 'LEFT');
       expect(helper.scope.slider.max).to.equal(56);
     });
+
+    it('should not be modified by keyboard if new range is above maxRange', function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          maxRange: 10,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+      //try to move minH right ( increase in rtl )
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.min).to.equal(45);
+
+      //try to move maxH left (decrease in rtl )
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'LEFT');
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+
+    it('should be modified by keyboard if new range is below maxRange', function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          maxRange: 10,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+
+      //try to move minH LEFT
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.min).to.equal(46);
+
+      //try to move maxH RIGHT
+      helper.slider.maxH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.maxH, 'RIGHT');
+      expect(helper.scope.slider.max).to.equal(54);
+    });
   });
 }());
 

tests/specs/mouse-controls/minRange-range-slider-horizontal-test.js → tests/specs/mouse-controls/minMaxRange-range-slider-horizontal-test.js

@@ -88,6 +88,75 @@
     });
   });
 
+  describe('Mouse controls - maxRange!=0 Range Horizontal', function() {
+    var helper,
+      RzSliderOptions,
+      $rootScope,
+      $timeout;
+
+    beforeEach(module('test-helper'));
+
+    beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+      helper = TestHelper;
+      RzSliderOptions = _RzSliderOptions_;
+      $rootScope = _$rootScope_;
+      $timeout = _$timeout_;
+    }));
+
+    afterEach(function() {
+      helper.clean();
+    });
+
+    beforeEach(function() {
+      var sliderConf = {
+        min: 45,
+        max: 55,
+        options: {
+          floor: 0,
+          ceil: 100,
+          maxRange: 10
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should not modify any value if new range would be larger than maxRange when moving minH', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 30,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(45);
+    });
+
+    it('should not modify any value if new range would be larger than maxRange when moving maxH', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 70,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(55);
+    });
+
+    it('should modify the min value if new range is smaller than maxRange when moving minH', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(expectedValue);
+    });
+
+    it('should modify the max value if new range is smaller than than maxRange when moving maxH', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 50,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(expectedValue);
+    });
+  });
+
   describe('Right to left Mouse controls - minRange!=0 Range Horizontal', function() {
     var helper,
       RzSliderOptions,