Merge pull request #962 from plotly/range-slider-v2

Range slider second iteration (part 1)

Author: etpinard

src/components/dragelement/index.js

@@ -177,6 +177,8 @@ function coverSlip() {
     return cover;
 }
 
+dragElement.coverSlip = coverSlip;
+
 function finishDrag(gd) {
     gd._dragging = false;
     if(gd._replotPending) Plotly.plot(gd);

src/components/rangeslider/constants.js

@@ -0,0 +1,51 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = {
+
+    // attribute container name
+    name: 'rangeslider',
+
+    // class names
+
+    containerClassName: 'rangeslider-container',
+    bgClassName: 'rangeslider-bg',
+    rangePlotClassName: 'rangeslider-rangeplot',
+
+    maskMinClassName: 'rangeslider-mask-min',
+    maskMaxClassName: 'rangeslider-mask-max',
+    slideBoxClassName: 'rangeslider-slidebox',
+
+    grabberMinClassName: 'rangeslider-grabber-min',
+    grabAreaMinClassName: 'rangeslider-grabarea-min',
+    handleMinClassName: 'rangeslider-handle-min',
+
+    grabberMaxClassName: 'rangeslider-grabber-max',
+    grabAreaMaxClassName: 'rangeslider-grabarea-max',
+    handleMaxClassName: 'rangeslider-handle-max',
+
+    // style constants
+
+    maskColor: 'rgba(0,0,0,0.4)',
+
+    slideBoxFill: 'transparent',
+    slideBoxCursor: 'ew-resize',
+
+    grabAreaFill: 'transparent',
+    grabAreaCursor: 'col-resize',
+    grabAreaWidth: 10,
+    grabAreaMinOffset: -6,
+    grabAreaMaxOffset: -2,
+
+    handleWidth: 2,
+    handleRadius: 1,
+    handleFill: '#fff',
+    handleStroke: '#666',
+};

src/components/rangeslider/create_slider.js

@@ -15,15 +15,19 @@ var attributes = require('./attributes');
 module.exports = function handleDefaults(layoutIn, layoutOut, axName, counterAxes) {
     if(!layoutIn[axName].rangeslider) return;
 
-    var containerIn = Lib.isPlainObject(layoutIn[axName].rangeslider) ?
-            layoutIn[axName].rangeslider : {},
+    // not super proud of this (maybe store _ in axis object instead
+    if(!Lib.isPlainObject(layoutIn[axName].rangeslider)) {
+        layoutIn[axName].rangeslider = {};
+    }
+
+    var containerIn = layoutIn[axName].rangeslider,
         containerOut = layoutOut[axName].rangeslider = {};
 
     function coerce(attr, dflt) {
         return Lib.coerce(containerIn, containerOut, attributes, attr, dflt);
     }
 
-    coerce('bgcolor');
+    coerce('bgcolor', layoutOut.plot_bgcolor);
     coerce('bordercolor');
     coerce('borderwidth');
     coerce('thickness');
@@ -48,4 +52,7 @@ module.exports = function handleDefaults(layoutIn, layoutOut, axName, counterAxe
             layoutOut[ax] = opposing;
         });
     }
+
+    // to map back range slider (auto) range
+    containerOut._input = containerIn;
 };