Merge pull request #8805 from zurb/fix-slider-top-increment

Clean up slider logic and fix bug with top end
foundation · May 19, 2016 · d45f88b · d45f88b
2 parents fe7fa45 + d14e0e3
commit d45f88b
Showing 1 changed file with 22 additions and 10 deletions.
diff --git a/js/foundation.slider.js b/js/foundation.slider.js
@@ -208,7 +208,7 @@ class Slider {
     /**
      * Fires when the value has not been change for a given time.
      * @event Slider#changed
-     */    
+     */
     clearTimeout(_this.timeout);
     _this.timeout = setTimeout(function(){
       _this.$element.trigger('changed.zf.slider', [$hndl]);
@@ -272,15 +272,28 @@ class Slider {
           vertical = this.options.vertical,
           param = vertical ? 'height' : 'width',
           direction = vertical ? 'top' : 'left',
-          pageXY = vertical ? e.pageY : e.pageX,
+          eventOffset = vertical ? e.pageY : e.pageX,
           halfOfHandle = this.$handle[0].getBoundingClientRect()[param] / 2,
           barDim = this.$element[0].getBoundingClientRect()[param],
-          // touch events emulated by the touch util give position relative to screen, add window.scroll to event coordinates...
-          windowScroll = vertical ? $(window).scrollTop() : $(window).scrollLeft(),
-          barOffset = this.$element.offset()[direction] - (this.$element.offset()[direction] < pageXY ? pageXY : (pageXY + windowScroll)),
-          //if the cursor position is less than or greater than the elements bounding coordinates, set coordinates within those bounds
-          barXY = barOffset > 0 ? -halfOfHandle : (barOffset - halfOfHandle) < -barDim ? barDim : Math.abs(barOffset),
-          offsetPct = percent(barXY, barDim);
+          windowScroll = vertical ? $(window).scrollTop() : $(window).scrollLeft();
+
+
+      var elemOffset = this.$element.offset()[direction];
+
+      // touch events emulated by the touch util give position relative to screen, add window.scroll to event coordinates...
+      // best way to guess this is simulated is if clientY == pageY
+      if (e.clientY === e.pageY) { eventOffset = eventOffset + windowScroll; }
+      var eventFromBar = eventOffset - elemOffset;
+      var barXY;
+      if (eventFromBar < 0) {
+        barXY = 0;
+      } else if (eventFromBar > barDim) {
+        barXY = barDim;
+      } else {
+        barXY = eventFromBar;
+      }
+      offsetPct = percent(barXY, barDim);
+
       value = (this.options.end - this.options.start) * offsetPct + this.options.start;
 
       // turn everything around for RTL, yay math!
@@ -377,7 +390,6 @@ class Slider {
 
           $body.on('mousemove.zf.slider', function(e) {
             e.preventDefault();
-
             _this._handleEvent(e, curHandle);
 
           }).on('mouseup.zf.slider', function(e) {
@@ -540,7 +552,7 @@ Slider.defaults = {
    */
   invertVertical: false,
   /**
-   * Milliseconds before the `changed.zf-slider` event is triggered after value change. 
+   * Milliseconds before the `changed.zf-slider` event is triggered after value change.
    * @option
    * @example 500
    */