Feature/restricted range

README.md

@@ -233,6 +233,7 @@ The default options are:
     precision: 0,
     minLimit: null,
     maxLimit: null,
+    restrictedRange: null,
     minRange: null,
     maxRange: null,
     pushRange: false,
@@ -300,6 +301,8 @@ 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._
+
 **minRange** - _Number (defaults to null)_: The minimum range authorized on the slider. _Applies to range slider only._
 
 **maxRange** - _Number (defaults to null)_: The maximum range authorized on the slider. _Applies to range slider only._

demo/demo.js

@@ -51,6 +51,20 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
     },
   }
 
+  $scope.restrictedRangeSlider = {
+    minValue: 10,
+    maxValue: 90,
+    options: {
+      restrictedRange: {
+        from: 30,
+        to: 70,
+      },
+      floor: 0,
+      ceil: 100,
+      step: 1,
+    },
+  }
+
   //Range slider with minRange and maxRange config
   $scope.minMaxRangeSlider = {
     minValue: 40,

demo/index.html

@@ -54,6 +54,15 @@ <h2>Range slider with min limit set to 10 and max limit set to 90 </h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Range slider with restricted area from 30 to 70</h2>
+    <rzslider
+      data-rz-slider-model="restrictedRangeSlider.minValue"
+      data-rz-slider-high="restrictedRangeSlider.maxValue"
+      data-rz-slider-options="restrictedRangeSlider.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Range slider with minimum range of 10 and maximum of 50</h2>
     <rzslider

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v6.5.1 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2018-03-30 */
+ 2018-06-29 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 ;(function(root, factory) {
@@ -36,6 +36,7 @@
         precision: 0,
         minRange: null,
         maxRange: null,
+        restrictedRange: null,
         pushRange: false,
         minLimit: null,
         maxLimit: null,
@@ -371,6 +372,7 @@
           this.setDisabledState()
           this.calcViewDimensions()
           this.setMinAndMax()
+          this.updateRestrictionBar()
           this.addAccessibility()
           this.updateCeilLab()
           this.updateFloorLab()
@@ -635,6 +637,7 @@
           this.manageEventsBindings()
           this.setDisabledState()
           this.calcViewDimensions()
+          this.updateRestrictionBar()
           this.refocusPointerIfNeeded()
         },
 
@@ -676,43 +679,36 @@
                   this.selBar = jElem
                   break
                 case 4:
-                  this.minH = jElem
+                  this.restrictedBar = jElem
                   break
                 case 5:
-                  this.maxH = jElem
+                  this.minH = jElem
                   break
                 case 6:
-                  this.flrLab = jElem
+                  this.maxH = jElem
                   break
                 case 7:
-                  this.ceilLab = jElem
+                  this.flrLab = jElem
                   break
                 case 8:
-                  this.minLab = jElem
+                  this.ceilLab = jElem
                   break
                 case 9:
-                  this.maxLab = jElem
+                  this.minLab = jElem
                   break
                 case 10:
-                  this.cmbLab = jElem
+                  this.maxLab = jElem
                   break
                 case 11:
+                  this.cmbLab = jElem
+                  break
+                case 12:
                   this.ticks = jElem
                   break
               }
             },
             this
           )
-
-          // Initialize position cache properties
-          this.selBar.rzsp = 0
-          this.minH.rzsp = 0
-          this.maxH.rzsp = 0
-          this.flrLab.rzsp = 0
-          this.ceilLab.rzsp = 0
-          this.minLab.rzsp = 0
-          this.maxLab.rzsp = 0
-          this.cmbLab.rzsp = 0
         },
 
         /**
@@ -753,6 +749,7 @@
             this.leftOutSelBar,
             !this.range || !this.options.showOuterSelectionBars
           )
+          this.alwaysHide(this.restrictedBar, !this.options.restrictedRange)
           this.alwaysHide(
             this.rightOutSelBar,
             !this.range || !this.options.showOuterSelectionBars
@@ -1305,6 +1302,26 @@
           return isRTL ? pos <= ceilPos + ceilDim + 2 : pos + dim >= ceilPos - 2
         },
 
+        /**
+         * Update restricted area bar
+         *
+         * @returns {undefined}
+         */
+        updateRestrictionBar: function() {
+          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)
+          }
+        },
+
         /**
          * Update slider selection bar, combined label and range label
          *
@@ -1379,8 +1396,12 @@
                   : 0,
               reversed = (offset - position > 0) ^ isSelectionBarFromRight,
               direction = this.options.vertical
-                ? reversed ? 'bottom' : 'top'
-                : reversed ? 'left' : 'right'
+                ? reversed
+                  ? 'bottom'
+                  : 'top'
+                : reversed
+                  ? 'left'
+                  : 'right'
             this.scope.barStyle = {
               backgroundImage:
                 'linear-gradient(to ' +
@@ -1775,9 +1796,8 @@
           else if (!this.options.rightToLeft)
             //if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
             return position < this.minH.rzsp ? this.minH : this.maxH
-          else
-            //reverse in rtl
-            return position > this.minH.rzsp ? this.minH : this.maxH
+          //reverse in rtl
+          else return position > this.minH.rzsp ? this.minH : this.maxH
         },
 
         /**
@@ -2369,6 +2389,7 @@
         positionTrackingHandle: function(newValue) {
           var valueChanged = false
           newValue = this.applyMinMaxLimit(newValue)
+          newValue = this.applyRestrictedRange(newValue)
           if (this.range) {
             if (this.options.pushRange) {
               newValue = this.applyPushRange(newValue)
@@ -2456,6 +2477,30 @@
           return newValue
         },
 
+        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
+            }
+          }
+          return newValue
+        },
+
         applyPushRange: function(newValue) {
           var difference =
               this.tracking === 'lowValue'
@@ -2654,7 +2699,7 @@
   'use strict';
 
   $templateCache.put('rzSliderTpl.html',
-    "<div class=rzslider><span class=\"rz-bar-wrapper rz-left-out-selection\"><span class=rz-bar></span></span> <span class=\"rz-bar-wrapper rz-right-out-selection\"><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=\"rz-pointer rz-pointer-min\" ng-style=minPointerStyle></span> <span class=\"rz-pointer rz-pointer-max\" ng-style=maxPointerStyle></span> <span class=\"rz-bubble rz-limit rz-floor\"></span> <span class=\"rz-bubble rz-limit rz-ceil\"></span> <span class=\"rz-bubble rz-model-value\"></span> <span class=\"rz-bubble rz-model-high\"></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=rz-tick ng-class=\"{'rz-selected': t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=rz-tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span> <span ng-if=\"t.legend != null\" class=rz-tick-legend>{{ t.legend }}</span></li></ul></div>"
+    "<div class=rzslider><span class=\"rz-bar-wrapper rz-left-out-selection\"><span class=rz-bar></span></span> <span class=\"rz-bar-wrapper rz-right-out-selection\"><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-restricted\" ng-style=restrictionStyle></span></span> <span class=\"rz-pointer rz-pointer-min\" ng-style=minPointerStyle></span> <span class=\"rz-pointer rz-pointer-max\" ng-style=maxPointerStyle></span> <span class=\"rz-bubble rz-limit rz-floor\"></span> <span class=\"rz-bubble rz-limit rz-ceil\"></span> <span class=\"rz-bubble rz-model-value\"></span> <span class=\"rz-bubble rz-model-high\"></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=rz-tick ng-class=\"{'rz-selected': t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=rz-tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span> <span ng-if=\"t.legend != null\" class=rz-tick-legend>{{ t.legend }}</span></li></ul></div>"
   );
 
 }]);