angular-slider · ValentinH · May 26, 2022 · Apr 25, 2022 · Apr 25, 2022 · Apr 25, 2022
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ temp/
 tests/coverage/
 yarn.lock
 cypress/videos
-npm-debug.log
+npm-debug.log
+.history/
diff --git a/README.md b/README.md
@@ -244,6 +244,7 @@ The default options are:
     minLimit: null,
     maxLimit: null,
     restrictedRange: null,
+    skipRestrictedRangesWithArrowKeys: null,
     minRange: null,
     maxRange: null,
     pushRange: false,
@@ -312,7 +313,9 @@ The default options are:
 
 **maxLimit** - _Number (defaults to null)_: The maximum value authorized on the slider.
 
-**restrictedRange** - _Object (defaults to null)_: Has two _Number_ properties, _from_ and _to_ that determine the bounds of an area that is not authorized for values. _Applies to range slider only._
+**restrictedRange** - _Object (defaults to null)_: Has two _Number_ properties, _from_ and _to_ that determine the bounds of an area that is not authorized for values. Can also use an array. _Applies to range slider only._
+
+**skipRestrictedRangesWithArrowKeys** - _Boolean (defaults to null)_: Set to true to skip restricted ranges with arrow keys.
 
 **minRange** - _Number (defaults to null)_: The minimum range authorized on the slider. _Applies to range slider only._
 

diff --git a/demo/demo.js b/demo/demo.js
@@ -65,6 +65,23 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
     },
   }
 
+  // Restricted range with multiple array and the feature skipRestrictedRangesWithArrowKeys
+  $scope.multipleRestrictedRangeSlider = {
+    minValue: 10,
+    maxValue: 90,
+    options: {
+      restrictedRange: [
+        { from: 20, to: 30 },
+        { from: 50, to: 60 },
+        { from: 75, to: 85 },
+      ],
+      skipRestrictedRangesWithArrowKeys: true,
+      floor: 0,
+      ceil: 100,
+      step: 1,
+    },
+  }
+
   //Range slider with minRange and maxRange config
   $scope.minMaxRangeSlider = {
     minValue: 40,

diff --git a/demo/index.html b/demo/index.html
@@ -63,6 +63,18 @@ <h2>Range slider with restricted area from 30 to 70</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Range slider with multiple restricted area from 20 to 30, 50 to 60 and 75 to 85
+      <br />
+      and the feature that skip restricted ranges with arrow keys
+    </h2>
+    <rzslider   
+      rz-slider-model="multipleRestrictedRangeSlider.minValue"
+      rz-slider-high="multipleRestrictedRangeSlider.maxValue"
+      rz-slider-options="multipleRestrictedRangeSlider.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Range slider with minimum range of 10 and maximum of 50</h2>
     <rzslider

diff --git a/dist/rzslider.css b/dist/rzslider.css
diff --git a/dist/rzslider.d.ts b/dist/rzslider.d.ts
@@ -29,8 +29,10 @@ declare module "angular" {
              * Object(defaults to null): Has two _Number_ properties, _from_ and _to_ that determine
              * the bounds of an area that is not authorized for values. _Applies to range slider only._
              */
-            restrictedRange?: { from: number, to: number } 
-            /** Number (defaults to null): The minimum range authorized on the slider. Applies to range slider only. */
+            restrictedRange?: { from: number, to: number } | Array<{from: number, to: number}>;
+            /** Number (defaults to null): The minimum range authorized on the slider. Applies to range slider only. Can also use an array.*/
+            skipRestrictedRangesWithArrowKeys?: boolean
+            /** Set to true to skip restricted ranges with arrow keys. */
             minRange?: number;
             /** Number (defaults to null): The maximum range authorized on the slider. Applies to range slider only. */
             maxRange?: number;

diff --git a/dist/rzslider.js b/dist/rzslider.js
@@ -1,7 +1,7 @@
 /*! angularjs-slider - v7.0.1 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervi.eu>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2021-09-07 */
+ 2022-05-26 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 ;(function(root, factory) {
@@ -37,6 +37,7 @@
         minRange: null,
         maxRange: null,
         restrictedRange: null,
+        skipRestrictedRangesWithArrowKeys: null,
         pushRange: false,
         minLimit: null,
         maxLimit: null,
@@ -520,8 +521,8 @@
         },
 
         /*
-       * Reflow the slider when the low handle changes (called with throttle)
-       */
+         * Reflow the slider when the low handle changes (called with throttle)
+         */
         onLowHandleChange: function() {
           this.syncLowValue()
           if (this.range) this.syncHighValue()
@@ -536,8 +537,8 @@
         },
 
         /*
-       * Reflow the slider when the high handle changes (called with throttle)
-       */
+         * Reflow the slider when the high handle changes (called with throttle)
+         */
         onHighHandleChange: function() {
           this.syncLowValue()
           this.syncHighValue()
@@ -665,6 +666,40 @@
           }
         },
 
+        /**
+         * Check if the restrictedRange option using multiple or not
+         *
+         * Run only once during initialization and only in case 4
+         *
+         * @returns {undefined}
+         */
+
+        ensureRestrictedBarIsArray: function(elem) {
+          var jElem = angular.element(elem)
+          this.restrictedBar = []
+          if (this.options.restrictedRange) {
+            // this.options.restrictedRange converting to an array even if it's not entered as array.
+            this.options.restrictedRange = !Array.isArray(
+              this.options.restrictedRange
+            )
+              ? [this.options.restrictedRange]
+              : this.options.restrictedRange
+            this.restrictedBar[0] = jElem
+            var mainDiv = elem.parentElement
+            for (var i = 1; i < this.options.restrictedRange.length; i++) {
+              var sp = document.createElement('span')
+              sp.setAttribute('class', 'rz-bar-wrapper')
+              sp.innerHTML =
+                '<span class="rz-bar rz-restricted" ng-style="restrictionStyle"></span>'
+              mainDiv.appendChild(sp)
+              this.restrictedBar[i] = angular.element(sp)
+            }
+          } else {
+            elem.style.visibility = 'hidden'
+            this.restrictedBar = null
+          }
+        },
+
         /**
          * Set the slider children to variables for easy access
          *
@@ -693,7 +728,7 @@
                   this.selBar = jElem
                   break
                 case 4:
-                  this.restrictedBar = jElem
+                  this.ensureRestrictedBarIsArray(elem)
                   break
                 case 5:
                   this.minH = jElem
@@ -773,7 +808,16 @@
             this.leftOutSelBar,
             !this.range || !this.options.showOuterSelectionBars
           )
-          this.alwaysHide(this.restrictedBar, !this.options.restrictedRange)
+
+          // this.restrictedBar is everytime an array
+          for (var r in this.restrictedBar) {
+            if (this.restrictedBar[r])
+              this.alwaysHide(
+                this.restrictedBar[r],
+                !this.options.restrictedRange[r]
+              )
+          }
+
           this.alwaysHide(
             this.rightOutSelBar,
             !this.range || !this.options.showOuterSelectionBars
@@ -1358,14 +1402,23 @@
           var position = 0,
             dimension = 0
           if (this.options.restrictedRange) {
-            var from = this.valueToPosition(this.options.restrictedRange.from),
-              to = this.valueToPosition(this.options.restrictedRange.to)
-            dimension = Math.abs(to - from)
-            position = this.options.rightToLeft
-              ? to + this.handleHalfDim
-              : from + this.handleHalfDim
-            this.setDimension(this.restrictedBar, dimension)
-            this.setPosition(this.restrictedBar, position)
+            this.options.restrictedRange = !Array.isArray(
+              this.options.restrictedRange
+            )
+              ? [this.options.restrictedRange]
+              : this.options.restrictedRange
+            for (var i in this.options.restrictedRange) {
+              var from = this.valueToPosition(
+                  this.options.restrictedRange[i].from
+                ),
+                to = this.valueToPosition(this.options.restrictedRange[i].to)
+              dimension = Math.abs(to - from)
+              position = this.options.rightToLeft
+                ? to + this.handleHalfDim
+                : from + this.handleHalfDim
+              this.setDimension(this.restrictedBar[i], dimension)
+              this.setPosition(this.restrictedBar[i], position)
+            }
           }
         },
 
@@ -1447,8 +1500,8 @@
                   ? 'bottom'
                   : 'top'
                 : reversed
-                  ? 'left'
-                  : 'right'
+                ? 'left'
+                : 'right'
             this.scope.barStyle = {
               backgroundImage:
                 'linear-gradient(to ' +
@@ -2183,6 +2236,55 @@
           }
         },
 
+        /**
+         * Skip restricted range function when arrow keys use
+         *
+         * @param {number} currentValue value of the slider
+         * @param {number} key arrow key used
+         *
+         * @returns {number} currentValue value of the slider
+         */
+
+        skipRestrictedRanges: function(key, currentValue) {
+          if (
+            this.options.restrictedRange &&
+            Array.isArray(this.options.restrictedRange)
+          ) {
+            for (var i in this.options.restrictedRange) {
+              var range = this.options.restrictedRange[i]
+              // if it first or last value
+              if (
+                (range.from === 0 &&
+                  currentValue === 0 &&
+                  [37, 40].includes(key)) || // LEFT or DOWN
+                (range.to >=
+                  this.options.restrictedRange[
+                    this.options.restrictedRange.length - 1
+                  ].to &&
+                  currentValue >=
+                    this.options.restrictedRange[
+                      this.options.restrictedRange.length - 1
+                    ].to &&
+                  [38, 39].includes(key)) // UP or RIGHT
+              ) {
+                return currentValue
+              }
+              if (range.to > currentValue && currentValue > range.from) {
+                if (
+                  Math.abs(range.to - currentValue) >
+                  Math.abs(range.from - currentValue)
+                ) {
+                  currentValue = range.to
+                } else {
+                  currentValue = range.from
+                }
+              }
+            }
+          }
+
+          return currentValue
+        },
+
         /**
          * Key actions helper function
          *
@@ -2228,9 +2330,9 @@
         },
 
         onKeyboardEvent: function(event) {
-          var currentValue = this[this.tracking],
-            keyCode = event.keyCode || event.which,
-            keys = {
+          var keyCode = event.keyCode || event.which
+          var currentValue = this[this.tracking]
+          var keys = {
               38: 'UP',
               40: 'DOWN',
               37: 'LEFT',
@@ -2254,6 +2356,9 @@
           var self = this
           $timeout(function() {
             var newValue = self.roundStep(self.sanitizeValue(action))
+            newValue = self.options.skipRestrictedRangesWithArrowKeys
+              ? self.skipRestrictedRanges(keyCode, newValue)
+              : newValue
             if (!self.options.draggableRangeOnly) {
               self.positionTrackingHandle(newValue)
             } else {
@@ -2548,26 +2653,30 @@
         },
 
         applyRestrictedRange: function(newValue) {
-          if (
-            this.options.restrictedRange != null &&
-            newValue > this.options.restrictedRange.from &&
-            newValue < this.options.restrictedRange.to
-          ) {
-            var halfWidth =
-              (this.options.restrictedRange.to -
-                this.options.restrictedRange.from) /
-              2
-            if (this.tracking === 'lowValue') {
-              return newValue > this.options.restrictedRange.from + halfWidth
-                ? this.options.restrictedRange.to
-                : this.options.restrictedRange.from
-            }
-            if (this.tracking === 'highValue') {
-              return newValue < this.options.restrictedRange.to - halfWidth
-                ? this.options.restrictedRange.from
-                : this.options.restrictedRange.to
+          for (var i in this.options.restrictedRange) {
+            if (
+              this.options.restrictedRange[i] != null &&
+              newValue > this.options.restrictedRange[i].from &&
+              newValue < this.options.restrictedRange[i].to
+            ) {
+              var halfWidth =
+                (this.options.restrictedRange[i].to -
+                  this.options.restrictedRange[i].from) /
+                2
+              if (this.tracking === 'lowValue') {
+                return newValue >
+                  this.options.restrictedRange[i].from + halfWidth
+                  ? this.options.restrictedRange[i].to
+                  : this.options.restrictedRange[i].from
+              }
+              if (this.tracking === 'highValue') {
+                return newValue < this.options.restrictedRange[i].to - halfWidth
+                  ? this.options.restrictedRange[i].from
+                  : this.options.restrictedRange[i].to
+              }
             }
           }
+
           return newValue
         },
 

diff --git a/dist/rzslider.min.css b/dist/rzslider.min.css
diff --git a/dist/rzslider.min.js b/dist/rzslider.min.js