support ax.side=top with rangesliders

Author: alexcjohnson

src/components/rangeslider/draw.js

@@ -159,16 +159,18 @@ module.exports = function(gd) {
 
         // title goes next to range slider instead of tick labels, so
         // just take it over and draw it from here
-        Titles.draw(gd, axisOpts._id + 'title', {
-            propContainer: axisOpts,
-            propName: axisOpts._name + '.title',
-            placeholder: fullLayout._dfltTitle.x,
-            attributes: {
-                x: axisOpts._offset + axisOpts._length / 2,
-                y: y + opts._height + opts._offsetShift + 10 + 1.5 * axisOpts.titlefont.size,
-                'text-anchor': 'middle'
-            }
-        });
+        if(axisOpts.side === 'bottom') {
+            Titles.draw(gd, axisOpts._id + 'title', {
+                propContainer: axisOpts,
+                propName: axisOpts._name + '.title',
+                placeholder: fullLayout._dfltTitle.x,
+                attributes: {
+                    x: axisOpts._offset + axisOpts._length / 2,
+                    y: y + opts._height + opts._offsetShift + 10 + 1.5 * axisOpts.titlefont.size,
+                    'text-anchor': 'middle'
+                }
+            });
+        }
 
         // update margins
         Plots.autoMargin(gd, opts._id, {

src/plots/cartesian/axes.js

@@ -2010,8 +2010,8 @@ axes.doTicks = function(gd, axid, skipTitle) {
         // configure their own titles.
         var ax = axisIds.getFromId(gd, axid);
 
-        // rangeslider takes over the title so drop it here
-        if(ax.rangeslider && ax.rangeslider.visible && ax._boundingBox) return;
+        // rangeslider takes over a bottom title so drop it here
+        if(ax.rangeslider && ax.rangeslider.visible && ax._boundingBox && ax.side === 'bottom') return;
 
         var avoidSelection = d3.select(gd).selectAll('g.' + axid + 'tick');
         var avoid = {

src/plots/cartesian/index.js

@@ -88,11 +88,9 @@ exports.finalizeSubplots = function(layoutIn, layoutOut) {
     // so if there are NO subplots at all, make one from the first
     // x & y axes in the input layout
     if(!spAll.length) {
-        var keys = Object.keys(layoutIn);
         xi = '';
         yi = '';
-        for(i = 0; i < keys.length; i++) {
-            var ki = keys[i];
+        for(var ki in layoutIn) {
             if(constants.attrRegex.test(ki)) {
                 var axLetter = ki.charAt(0);
                 if(axLetter === 'x') {

test/image/baselines/range_slider_multiple.png

@@ -21,7 +21,8 @@
       "domain": [ 0, 0.45 ],
       "range": [ 1, 2 ],
       "rangeslider": {},
-      "title": "X"
+      "title": "X",
+      "side": "top"
     },
     "xaxis2": {
       "anchor": "y2",