Adapting component to render properly on min/max limits changed.

Also adding a force re-render mechanism useful when using tabs.

rzslider.js

@@ -13,7 +13,7 @@
 
 angular.module('rzModule', [])
 
-.value('throttle',
+    .value('throttle',
     /**
      * throttle
      *
@@ -24,7 +24,7 @@ angular.module('rzModule', [])
      * @param {ThrottleOptions} options
      * @returns {Function}
      */
-function throttle(func, wait, options) {
+        function throttle(func, wait, options) {
         var getTime = (Date.now || function() {
             return new Date().getTime();
         });
@@ -55,10 +55,10 @@ function throttle(func, wait, options) {
             }
             return result;
         }
-})
+    })
 
-.factory('Slider', ['$timeout', '$document', 'throttle', function($timeout, $document, throttle)
-{
+    .factory('Slider', ['$timeout', '$document', 'throttle', function($timeout, $document, throttle)
+    {
         /**
          * Slider
          *
@@ -192,6 +192,7 @@ function throttle(func, wait, options) {
              */
             init: function()
             {
+                //console.log("slider.init...");
                 var self = this;
 
                 if(this.scope.rzSliderTranslate)
@@ -212,10 +213,7 @@ function throttle(func, wait, options) {
                     self.updateFloorLab();
                     self.initHandles();
                     self.bindEvents();
-      });
-
-      // Recalculate slider view dimensions
-      this.scope.$on('reCalcViewDimensions', angular.bind(this, this.calcViewDimensions));
+                },100);
 
                 // Recalculate stuff if view port dimensions have changed
                 angular.element(window).on('resize', angular.bind(this, this.calcViewDimensions));
@@ -226,7 +224,6 @@ function throttle(func, wait, options) {
 
                 var thrLow = throttle(function()
                 {
-        self.setMinAndMax();
                     self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
 
                     if(self.range)
@@ -239,25 +236,57 @@ function throttle(func, wait, options) {
 
                 var thrHigh = throttle(function()
                 {
-        self.setMinAndMax();
                     self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
                     self.updateSelectionBar();
                     self.updateCmbLabel();
                 }, 350, { leading: false });
 
-      this.scope.$watch('rzSliderModel', function(newValue, oldValue)
-      {
+
+                this.scope.$watch('rzSliderModel', function(newValue, oldValue){
+                    //console.log("sliderModel.changed...");
                     if(newValue === oldValue) return;
                     thrLow();
                 });
 
-      this.scope.$watch('rzSliderHigh', function(newValue, oldValue)
-      {
+                this.scope.$watch('rzSliderHigh', function(newValue, oldValue){
+                    //console.log("sliderHigh.changed...");
+                    if(newValue === oldValue) return;
+                    thrHigh();
+                });
+
+                this.scope.$watch('rzSliderFloor', function(newValue, oldValue){
+                    //console.log("sliderFloor.changed...");
+                    if(newValue === oldValue) return;
+                    self.resetSlider();
+                });
+
+                this.scope.$watch('rzSliderCeil', function(newValue, oldValue){
+                    //console.log("sliderCeil.changed...");
                     if(newValue === oldValue) return;
+                    self.resetSlider();
+                });
+
+                this.scope.$watch('rzSliderForceRender', function(newValue, oldValue){
+                    //console.log("rzSliderForceRender.changed...");
+                    self.resetLabelsWidth();
+                    thrLow();
                     thrHigh();
+                    self.resetSlider();
                 });
             },
 
+            resetLabelsWidth: function() {
+                this.minLab.rzsv = undefined;
+                this.maxLab.rzsv = undefined;
+            },
+
+            resetSlider: function() {
+                this.setMinAndMax();
+                this.calcViewDimensions();
+                this.updateCeilLab();
+                this.updateFloorLab();
+            },
+
             /**
              * Initialize slider handles positions and labels
              *
@@ -311,6 +340,7 @@ function throttle(func, wait, options) {
              */
             setMinAndMax: function()
             {
+                //console.log("slider.setMinAndMax...");
                 if(this.scope.rzSliderFloor)
                 {
                     this.minValue = +this.scope.rzSliderFloor;
@@ -475,6 +505,7 @@ function throttle(func, wait, options) {
              */
             updateLowHandle: function(newOffset)
             {
+                //console.log("updateLowHandle: hhw: " + this.handleHalfWidth + " mh" + newOffset );
                 this.setLeft(this.minH, newOffset);
                 this.translateFn(this.scope.rzSliderModel, this.minLab);
                 this.setLeft(this.minLab, newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth);
@@ -684,6 +715,7 @@ function throttle(func, wait, options) {
              */
             valueToOffset: function(val)
             {
+                //console.log("valueToOffset..." + val + " minV: " + this.minValue + " maxL " + this.maxLeft + " vr: " + this.valueRange);
                 return (val - this.minValue) * this.maxLeft / this.valueRange;
             },
 
@@ -844,10 +876,10 @@ function throttle(func, wait, options) {
         };
 
         return Slider;
-}])
+    }])
 
-.directive('rzslider', ['Slider', function(Slider)
-{
+    .directive('rzslider', ['Slider', function(Slider)
+    {
         return {
             restrict: 'E',
             scope: {
@@ -857,7 +889,8 @@ function throttle(func, wait, options) {
                 rzSliderPrecision: '@',
                 rzSliderModel: '=?',
                 rzSliderHigh: '=?',
-      rzSliderTranslate: '&'
+                rzSliderTranslate: '&',
+                rzSliderForceRender: '=?'
             },
             template:   '<span class="bar"></span>' + // 0 The slider bar
                 '<span class="bar selection"></span>' + // 1 Highlight between two handles
@@ -874,7 +907,7 @@ function throttle(func, wait, options) {
                 return new Slider(scope, elem, attr);
             }
         };
-}]);
+    }]);
 
 // IDE assist