Merge pull request #332 from angular-slider/min-max-limit

feat(minMaxLimit): Add a minLimit and a maxLimit

README.md

@@ -187,6 +187,8 @@ The default options are:
     step: 1,
     precision: 0,
     minRange: 0,
+    minLimit: null,
+    maxLimit: null,
     id: null,
     translate: null,
     getLegend: null,
@@ -231,6 +233,10 @@ The default options are:
 
 **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.
+
 **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,6 +17,18 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Range slider with minRange config
+  $scope.minMaxLimitSlider = {
+    value: 50,
+    options: {
+      floor: 0,
+      ceil: 100,
+      step: 1,
+      minLimit: 10,
+      maxLimit: 90
+    }
+  };
+
   //Range slider with minRange config
   $scope.minRangeSlider = {
     minValue: 10,

demo/index.html

@@ -36,6 +36,14 @@
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Range slider with min limit set to 10 and max limit set to 90 </h2>
+    <rzslider
+      rz-slider-model="minMaxLimitSlider.value"
+      rz-slider-options="minMaxLimitSlider.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Range slider with minimum range of 10</h2>
     <rzslider

dist/rzslider.js

 /*! angularjs-slider - v2.13.0 - 
  (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-05-13 */
+ 2016-05-22 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -32,6 +32,8 @@
       step: 1,
       precision: 0,
       minRange: 0,
+      minLimit: null,
+      maxLimit: null,
       id: null,
       translate: null,
       getLegend: null,
@@ -1754,6 +1756,7 @@
       positionTrackingHandle: function(newValue) {
         var valueChanged = false;
 
+        newValue = this.applyMinMaxLimit(newValue);
         if (this.range) {
           newValue = this.applyMinRange(newValue);
           /* This is to check if we need to switch the min and max handles */
@@ -1801,6 +1804,14 @@
           this.applyModel();
       },
 
+      applyMinMaxLimit: function(newValue) {
+        if (this.options.minLimit != null && newValue < this.options.minLimit)
+          return this.options.minLimit
+        if (this.options.maxLimit != null && newValue > 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,

src/rzslider.js

@@ -36,6 +36,8 @@
       step: 1,
       precision: 0,
       minRange: 0,
+      minLimit: null,
+      maxLimit: null,
       id: null,
       translate: null,
       getLegend: null,
@@ -1758,6 +1760,7 @@
       positionTrackingHandle: function(newValue) {
         var valueChanged = false;
 
+        newValue = this.applyMinMaxLimit(newValue);
         if (this.range) {
           newValue = this.applyMinRange(newValue);
           /* This is to check if we need to switch the min and max handles */
@@ -1805,6 +1808,14 @@
           this.applyModel();
       },
 
+      applyMinMaxLimit: function(newValue) {
+        if (this.options.minLimit != null && newValue < this.options.minLimit)
+          return this.options.minLimit
+        if (this.options.maxLimit != null && newValue > 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,

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

@@ -126,6 +126,74 @@
       helper.pressKeydown(helper.slider.maxH, 'RIGHT');
       expect(helper.scope.slider.max).to.equal(56);
     });
+
+    it('should be modified by keyboard if new value is above minLimit', function() {
+      var sliderConf = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          minLimit: 10
+        }
+      };
+      helper.createSlider(sliderConf);
+      //try to move minH right
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.value).to.equal(11);
+    });
+
+    it('should not be modified by keyboard if new value is below minLimit', function() {
+      var sliderConf = {
+        value: 10,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          minLimit: 10
+        }
+      };
+      helper.createSlider(sliderConf);
+      //try to move minH left
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.value).to.equal(10);
+    });
+
+    it('should be modified by keyboard if new value is below maxLimit', function() {
+      var sliderConf = {
+        value: 90,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          maxLimit: 90
+        }
+      };
+      helper.createSlider(sliderConf);
+      //try to move minH left
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'LEFT');
+      expect(helper.scope.slider.value).to.equal(89);
+    });
+
+    it('should not be modified by keyboard if new value is above maxLimit', function() {
+      var sliderConf = {
+        value: 90,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1,
+          maxLimit: 90
+        }
+      };
+      helper.createSlider(sliderConf);
+      //try to move minH right
+      helper.slider.minH.triggerHandler('focus');
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(helper.scope.slider.value).to.equal(90);
+    });
   });
 
   describe('Right to left Keyboard controls - specific tests', function() {

tests/specs/mouse-controls/minMaxLimit-range-slider-horizontal-test.js

+(function() {
+  "use strict";
+
+  describe('Mouse controls - minLimit!=null && maxLimit!=null 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,
+          minLimit: 40,
+          maxLimit: 60
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should be able to modify minH above minLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 42,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(42);
+    });
+
+    it('should not be able to modify minH below minLimit', 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(40);
+    });
+
+    it('should be able to modify maxH below maxLimit', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 58,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(58);
+    });
+
+    it('should not be able to modify maxH above maxLimit', 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(60);
+    });
+  });
+
+  describe('Right to left Mouse controls - minLimit!=null && maxLimit!=null 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,
+          minLimit: 40,
+          maxLimit: 60,
+          rightToLeft: true
+        }
+      };
+      helper.createRangeSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should be able to modify minH above minLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 42,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.min).to.equal(42);
+    });
+
+    it('should not be able to modify minH below minLimit', 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(40);
+    });
+
+    it('should be able to modify maxH below maxLimit', function() {
+      helper.fireMousedown(helper.slider.maxH, 0);
+      var expectedValue = 58,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.max).to.equal(58);
+    });
+
+    it('should not be able to modify maxH above maxLimit', 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(60);
+    });
+  });
+}());
+

tests/specs/mouse-controls/minMaxLimit-single-slider-horizontal-test.js

+(function() {
+  "use strict";
+
+  describe('Mouse controls - minLimit!=null && maxLimit!=null Single 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 = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          minLimit: 40,
+          maxLimit: 60
+        }
+      };
+      helper.createSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should be able to modify minH above minLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 42,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.value).to.equal(42);
+    });
+
+    it('should not be able to modify minH below minLimit', 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.value).to.equal(40);
+    });
+
+    it('should be able to modify minH below maxLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 58,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.value).to.equal(58);
+    });
+
+    it('should not be able to modify minH above maxLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 70,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.value).to.equal(60);
+    });
+  });
+
+  describe('Right to left Mouse controls - minLimit!=null && maxLimit!=null Single 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 = {
+        value: 50,
+        options: {
+          floor: 0,
+          ceil: 100,
+          minLimit: 40,
+          maxLimit: 60,
+          rightToLeft: true
+        }
+      };
+      helper.createSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      helper.fireMouseup();
+    });
+
+    it('should be able to modify minH above minLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 42,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.value).to.equal(42);
+    });
+
+    it('should not be able to modify minH below minLimit', 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.value).to.equal(40);
+    });
+
+    it('should be able to modify minH below maxLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 58,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.value).to.equal(58);
+    });
+
+    it('should not be able to modify minH above maxLimit', function() {
+      helper.fireMousedown(helper.slider.minH, 0);
+      var expectedValue = 70,
+        offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
+      helper.fireMousemove(offset);
+      expect(helper.scope.slider.value).to.equal(60);
+    });
+  });
+}());
+

tests/specs/options-handling-test.js

@@ -552,6 +552,27 @@
         expect(maxHChild.css('background-color')).to.equal('blue');
 
       });
+
+      it('should set the correct position for labels for single slider with boundPointerLabels=false', function() {
+        var sliderConf = {
+          min: 100000000,
+          max: 100001000,
+          options: {
+            floor: 100000000,
+            ceil: 100001000,
+            boundPointerLabels: false
+          }
+        };
+
+        helper.createRangeSlider(sliderConf);
+        expect(helper.slider.minLab.css('left')).to.equal('-' + (helper.slider.minLab.rzsd / 2 - helper.slider.handleHalfDim) + 'px');
+        expect(helper.slider.maxLab.css('left')).to.equal((helper.slider.barDimension - (helper.slider.maxLab.rzsd / 2 + helper.slider.handleHalfDim)) + 'px');
+
+        sliderConf.max = 100000001;
+        helper.createRangeSlider(sliderConf);
+
+        expect(parseInt(helper.slider.cmbLab.css('left'))).to.be.below(0);
+      });
     });
 
     describe('range slider specific - ', function() {
@@ -1163,28 +1184,6 @@
         expect(helper.slider.minValue).to.equal(1);
         expect(helper.slider.maxValue).to.equal(1000);
       });
-
-      it('should set the correct position for labels for single slider with boundPointerLabels=false', function() {
-        var sliderConf = {
-          min: 100000000,
-          max: 100001000,
-          options: {
-            floor: 100000000,
-            ceil: 100001000,
-            boundPointerLabels: false
-          }
-        };
-
-        helper.createRangeSlider(sliderConf);
-        expect(helper.slider.minLab.css('left')).to.equal('-' + (helper.slider.minLab.rzsd / 2 - helper.slider.handleHalfDim) + 'px');
-        expect(helper.slider.maxLab.css('left')).to.equal((helper.slider.barDimension - (helper.slider.maxLab.rzsd / 2 + helper.slider.handleHalfDim)) + 'px');
-
-        sliderConf.max = 100000001;
-        helper.createRangeSlider(sliderConf);
-
-        expect(parseInt(helper.slider.cmbLab.css('left'))).to.be.below(0);
-      });
-
     });
   });