Merge pull request #4448 from jay-bis/fix-rangeslider-oob-bug

ensure newRng stays in bounds

Author: archmoj

src/components/rangeslider/draw.js

@@ -254,18 +254,27 @@ function setupDragElement(rangeSlider, gd, axisOpts, opts) {
             switch(target) {
                 case slideBox:
                     cursor = 'ew-resize';
+                    if(minVal + delta > axisOpts._length || maxVal + delta < 0) {
+                        return;
+                    }
                     pixelMin = minVal + delta;
                     pixelMax = maxVal + delta;
                     break;
 
                 case grabAreaMin:
                     cursor = 'col-resize';
+                    if(minVal + delta > axisOpts._length) {
+                        return;
+                    }
                     pixelMin = minVal + delta;
                     pixelMax = maxVal;
                     break;
 
                 case grabAreaMax:
                     cursor = 'col-resize';
+                    if(maxVal + delta < 0) {
+                        return;
+                    }
                     pixelMin = minVal;
                     pixelMax = maxVal + delta;
                     break;

test/jasmine/tests/range_slider_test.js

@@ -185,12 +185,48 @@ describe('Visible rangesliders', function() {
             return slide(start, sliderY, end, sliderY);
         })
         .then(function() {
-            var maskMax = getRangeSliderChild(3);
-            var handleMax = getRangeSliderChild(6);
+            var maskMin = getRangeSliderChild(3);
+            var handleMin = getRangeSliderChild(6);
 
             expect(gd.layout.xaxis.range).toBeCloseToArray([0, 45.04], -0.5);
-            expect(+maskMax.getAttribute('width')).toBeCloseTo(-diff);
-            testTranslate1D(handleMax, dataMaxStart + diff);
+            expect(+maskMin.getAttribute('width')).toBeCloseTo(-diff);
+            testTranslate1D(handleMin, dataMaxStart + diff);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('should not exceed slider bounds left to right', function(done) {
+        var start = 940;
+        var end = 990;
+
+        plotMock().then(function() {
+            gd._fullLayout.xaxis.d2p(49);
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray([0, 49]);
+
+            return slide(start, sliderY, end, sliderY);
+        })
+        .then(function() {
+            expect(gd.layout.xaxis.range).toBeCloseToArray([0, 49], -0.5);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('should not exceed slider bounds right to left', function(done) {
+        var start = 0;
+        var end = -50;
+
+        plotMock().then(function() {
+            gd._fullLayout.xaxis.d2p(-49);
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray([0, 49]);
+
+            return slide(start, sliderY, end, sliderY);
+        })
+        .then(function() {
+            expect(gd.layout.xaxis.range).toBeCloseToArray([0, 49], -0.5);
         })
         .then(done, done.fail);
     });