diff --git a/src/components/rangeslider/create_slider.js b/src/components/rangeslider/create_slider.js index 25254d5018d..0aaf2b98315 100644 --- a/src/components/rangeslider/create_slider.js +++ b/src/components/rangeslider/create_slider.js @@ -249,8 +249,8 @@ module.exports = function createSlider(gd, minStart, maxStart) { ]); sliderContainer.data([0]) - .enter().append(function() { - options.setRange = setRange; - return slider; - }); + .enter().append(function() { + options.setRange = setRange; + return slider; + }); }; diff --git a/src/components/rangeslider/index.js b/src/components/rangeslider/index.js index d74eefdbd1a..77a4c092430 100644 --- a/src/components/rangeslider/index.js +++ b/src/components/rangeslider/index.js @@ -41,11 +41,15 @@ function draw(gd, minStart, maxStart) { var height = (fullLayout.height - fullLayout.margin.b - fullLayout.margin.t) * options.thickness, offsetShift = Math.floor(options.borderwidth / 2); - if(sliderContainer[0].length === 0) createSlider(gd, minStart, maxStart); + if(sliderContainer[0].length === 0 && !fullLayout._hasGL2D) createSlider(gd, minStart, maxStart); + + // Need to default to 0 for when making gl plots + var bb = fullLayout.xaxis._boundingBox ? + fullLayout.xaxis._boundingBox.height : 0; Plots.autoMargin(gd, 'range-slider', { x: 0, y: 0, l: 0, r: 0, t: 0, - b: height + fullLayout.margin.b + fullLayout.xaxis._boundingBox.height, + b: height + fullLayout.margin.b + bb, pad: 15 + offsetShift * 2 }); } diff --git a/test/jasmine/tests/gl_plot_interact_test.js b/test/jasmine/tests/gl_plot_interact_test.js index 92607cf5d42..6f6cdd96336 100644 --- a/test/jasmine/tests/gl_plot_interact_test.js +++ b/test/jasmine/tests/gl_plot_interact_test.js @@ -414,3 +414,38 @@ describe('Test gl plot interactions', function() { }); }); }); + +describe('Test gl plot side effects', function() { + describe('when present with rangeslider', function() { + + var gd; + + beforeEach(function() { + gd = createGraphDiv(); + }); + + afterEach(destroyGraphDiv); + + it('should not draw the rangeslider', function(done) { + var data = [{ + x: [1,2,3], + y: [2,3,4], + type: 'scattergl' + }, { + x: [1,2,3], + y: [2,3,4], + type: 'scatter' + }]; + + var layout = { + xaxis: { rangeslider: { visible: true } } + }; + + Plotly.plot(gd, data, layout).then(function() { + var rangeSlider = document.getElementsByClassName('range-slider')[0]; + expect(rangeSlider).not.toBeDefined(); + done(); + }); + }); + }); +});