Merge pull request #153 from elifitch/configurable-interval

Configurable update interval

README.md

@@ -155,6 +155,10 @@ $scope.priceSlider = {
 
 > Disable the slider (apply a special style and unbind events)
 
+**rz-slider-interval**
+
+> The interval (in ms) at which the slider DOM element updates when rz-slider-model or rz-slider-high change from outside the slider. Defaults to 350.
+
 ```javascript
 // In your controller
 

dist/rzslider.js

@@ -232,6 +232,14 @@ function throttle(func, wait, options) {
      */
     this.disabled = this.scope.rzSliderDisabled;
 
+    /**
+     * The interval at which the slider updates when the model/high values
+     * are altered from outside the slider
+     *
+     * @type {number}
+     */
+    this.interval = this.scope.rzSliderInterval !== null ? this.scope.rzSliderInterval : 350;
+
     /**
      * The delta between min and max value
      *
@@ -330,7 +338,7 @@ function throttle(func, wait, options) {
           self.updateCmbLabel();
         }
 
-      }, 350, { leading: false });
+      }, self.interval);
 
       thrHigh = throttle(function()
       {
@@ -339,7 +347,7 @@ function throttle(func, wait, options) {
         self.updateSelectionBar();
         self.updateTicksScale();
         self.updateCmbLabel();
-      }, 350, { leading: false });
+      }, self.interval);
 
       this.scope.$on('rzSliderForceRender', function()
       {
@@ -1414,6 +1422,7 @@ function throttle(func, wait, options) {
       rzSliderShowTicks: '=?',
       rzSliderShowTicksValue: '=?',
       rzSliderDisabled: '=?',
+      rzSliderInterval: '=?',
     },
 
     /**

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v1.0.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/rzajac/angularjs-slider.git - 2015-10-12 */
+/*! angularjs-slider - v1.0.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/rzajac/angularjs-slider.git - 2015-10-15 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] span.rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file

src/rzslider.js

@@ -232,6 +232,14 @@ function throttle(func, wait, options) {
      */
     this.disabled = this.scope.rzSliderDisabled;
 
+    /**
+     * The interval at which the slider updates when the model/high values
+     * are altered from outside the slider
+     *
+     * @type {number}
+     */
+    this.interval = this.scope.rzSliderInterval !== null ? this.scope.rzSliderInterval : 350;
+
     /**
      * The delta between min and max value
      *
@@ -330,7 +338,7 @@ function throttle(func, wait, options) {
           self.updateCmbLabel();
         }
 
-      }, 350, { leading: false });
+      }, self.interval);
 
       thrHigh = throttle(function()
       {
@@ -339,7 +347,7 @@ function throttle(func, wait, options) {
         self.updateSelectionBar();
         self.updateTicksScale();
         self.updateCmbLabel();
-      }, 350, { leading: false });
+      }, self.interval);
 
       this.scope.$on('rzSliderForceRender', function()
       {
@@ -1414,6 +1422,7 @@ function throttle(func, wait, options) {
       rzSliderShowTicks: '=?',
       rzSliderShowTicksValue: '=?',
       rzSliderDisabled: '=?',
+      rzSliderInterval: '=?',
     },
 
     /**