Use rangeslider range for width and set initial range

Author: mdtusz

src/components/rangeslider/create_slider.js

@@ -19,7 +19,7 @@ var helpers = require('./helpers');
 var rangePlot = require('./range_plot');
 
 
-module.exports = function createSlider(gd, minStart, maxStart) {
+module.exports = function createSlider(gd) {
     var fullLayout = gd._fullLayout,
         sliderContainer = fullLayout._infolayer.selectAll('g.range-slider'),
         options = fullLayout.xaxis.rangeslider,
@@ -30,8 +30,8 @@ module.exports = function createSlider(gd, minStart, maxStart) {
         x = fullLayout.margin.l,
         y = fullLayout.height - height - fullLayout.margin.b;
 
-    minStart = minStart || 0;
-    maxStart = maxStart || width;
+    var minStart = 0,
+        maxStart = width;
 
     var slider = document.createElementNS(svgNS, 'g');
     helpers.setAttributes(slider, {
@@ -130,10 +130,6 @@ module.exports = function createSlider(gd, minStart, maxStart) {
     });
 
 
-    console.log('in create slider')
-    console.log(Axes.getAutoRange(fullLayout.xaxis))
-    console.log(fullLayout.xaxis.range)
-
     slider.addEventListener('mousedown', function(event) {
         var target = event.target,
             startX = event.clientX,
@@ -182,8 +178,8 @@ module.exports = function createSlider(gd, minStart, maxStart) {
         min = min || -Infinity;
         max = max || Infinity;
 
-        var rangeMin = fullLayout.xaxis.range[0],
-            rangeMax = fullLayout.xaxis.range[1],
+        var rangeMin = options.range[0],
+            rangeMax = options.range[1],
             range = rangeMax - rangeMin,
             pixelMin = (min - rangeMin) / range * width,
             pixelMax = (max - rangeMin) / range * width;
@@ -222,9 +218,8 @@ module.exports = function createSlider(gd, minStart, maxStart) {
         helpers.setAttributes(grabberMin, { 'transform': 'translate(' + (min - handleWidth - 1) + ')' });
         helpers.setAttributes(grabberMax, { 'transform': 'translate(' + max + ')' });
 
-        // call to set range on plot here
-        var rangeMin = fullLayout.xaxis.range[0],
-            rangeMax = fullLayout.xaxis.range[1],
+        var rangeMin = options.range[0],
+            rangeMax = options.range[1],
             range = rangeMax - rangeMin,
             dataMin = min / width * range + rangeMin,
             dataMax = max / width * range + rangeMin;
@@ -241,6 +236,11 @@ module.exports = function createSlider(gd, minStart, maxStart) {
     }
 
 
+    // Set slider range using axis autorange if necessary.
+    if(!options.range) {
+        options.range = Axes.getAutoRange(fullLayout.xaxis);
+    }
+
     var rangePlots = rangePlot(gd, width, height);
 
     helpers.appendChildren(slider, [
@@ -253,6 +253,9 @@ module.exports = function createSlider(gd, minStart, maxStart) {
         grabberMax
     ]);
 
+    // Set initially selected range
+    setRange(fullLayout.xaxis.range[0], fullLayout.xaxis.range[1]);
+
     sliderContainer.data([0])
         .enter().append(function() {
             options.setRange = setRange;

src/components/rangeslider/range_plot.js

@@ -16,11 +16,12 @@ var svgNS = require('../../constants/xmlns_namespaces').svg;
 
 module.exports = function rangePlot(gd, w, h) {
 
-    var traces = gd._fullData,
-        xaxis = gd._fullLayout.xaxis,
-        yaxis = gd._fullLayout.yaxis,
-        minX = xaxis.range[0],
-        maxX = xaxis.range[1],
+    var fullLayout = gd._fullLayout,
+        traces = gd._fullData,
+        xaxis = fullLayout.xaxis,
+        yaxis = fullLayout.yaxis,
+        minX = xaxis.rangeslider.range[0],
+        maxX = xaxis.rangeslider.range[1],
         minY = yaxis.range[0],
         maxY = yaxis.range[1];
 

src/plots/cartesian/axes.js

@@ -200,8 +200,6 @@ axes.doAutoRange = function(ax) {
     // TODO do we really need this?
     var hasDeps = (ax._min && ax._max && ax._min.length && ax._max.length);
 
-    console.log('in do autorange')
-
     if(ax.autorange && hasDeps) {
         ax.range = axes.getAutoRange(ax);
 
@@ -258,14 +256,13 @@ axes.saveRangeInitial = function(gd, overwrite) {
 //          and make it a tight bound if possible
 var FP_SAFE = Number.MAX_VALUE/2;
 axes.expand = function(ax, data, options) {
-    if(!(ax.autorange || (ax.rangeslider || {}).visible) || !data) return;
+    // if(!(ax.autorange || (ax.rangeslider || {}).visible) || !data) return;
+    if(!(ax.autorange || ax._needsExpand) || !data) return;
     if(!ax._min) ax._min = [];
     if(!ax._max) ax._max = [];
     if(!options) options = {};
     if(!ax._m) ax.setScale();
 
-    console.log('in exapnd', ax._name)
-
     var len = data.length,
         extrappad = options.padded ? ax._length*0.05 : 0,
         tozero = options.tozero && (ax.type==='linear' || ax.type==='-'),