Slider component

src/components/sliders/attributes.js

@@ -10,9 +10,9 @@
 
 var fontAttrs = require('../../plots/font_attributes');
 var padAttrs = require('../../plots/pad_attributes');
-var colorAttrs = require('../color/attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 var animationAttrs = require('../../plots/animation_attributes');
+var constants = require('./constants');
 
 var stepsAttrs = {
     _isLinkedToArray: true,
@@ -37,7 +37,7 @@ var stepsAttrs = {
         ],
         description: [
             'Sets the arguments values to be passed to the Plotly',
-            'method set in `method` on click.'
+            'method set in `method` on slide.'
         ].join(' ')
     },
     label: {
@@ -84,8 +84,7 @@ module.exports = {
         role: 'info',
         dflt: 'fraction',
         description: [
-            'Determines whether this color bar\'s length',
-            '(i.e. the measure in the color variation direction)',
+            'Determines whether this slider length',
             'is set in units of plot *fraction* or in *pixels.',
             'Use `len` to set the value.'
         ].join(' ')
@@ -96,9 +95,9 @@ module.exports = {
         dflt: 1,
         role: 'style',
         description: [
-            'Sets the length of the color bar',
+            'Sets the length of the slider',
             'This measure excludes the padding of both ends.',
-            'That is, the color bar length is this length minus the',
+            'That is, the slider\'s length is this length minus the',
             'padding on both ends.'
         ].join(' ')
     },
@@ -209,22 +208,59 @@ module.exports = {
         description: 'Sets the font of the slider step labels.'
     }),
 
+    activebgcolor: {
+        valType: 'color',
+        role: 'style',
+        dflt: constants.gripBgActiveColor,
+        description: [
+            'Sets the background color of the slider grip',
+            'while dragging.'
+        ].join(' ')
+    },
     bgcolor: {
         valType: 'color',
         role: 'style',
-        description: 'Sets the background color of the slider buttons.'
+        dflt: constants.railBgColor,
+        description: 'Sets the background color of the slider.'
     },
     bordercolor: {
         valType: 'color',
-        dflt: colorAttrs.borderLine,
+        dflt: constants.railBorderColor,
         role: 'style',
         description: 'Sets the color of the border enclosing the slider.'
     },
     borderwidth: {
         valType: 'number',
         min: 0,
-        dflt: 1,
+        dflt: constants.railBorderWidth,
         role: 'style',
         description: 'Sets the width (in px) of the border enclosing the slider.'
-    }
+    },
+    ticklen: {
+        valType: 'number',
+        min: 0,
+        dflt: constants.tickLength,
+        role: 'style',
+        description: 'Sets the length in pixels of step tick marks'
+    },
+    tickcolor: {
+        valType: 'color',
+        dflt: constants.tickColor,
+        role: 'style',
+        description: 'Sets the color of the border enclosing the slider.'
+    },
+    tickwidth: {
+        valType: 'number',
+        min: 0,
+        dflt: 1,
+        role: 'style',
+        description: 'Sets the tick width (in px).'
+    },
+    minorticklen: {
+        valType: 'number',
+        min: 0,
+        dflt: constants.minorTickLength,
+        role: 'style',
+        description: 'Sets the length in pixels of minor step tick marks'
+    },
 };

src/components/sliders/constants.js

@@ -55,6 +55,7 @@ module.exports = {
     railRadius: 2,
     railWidth: 5,
     railBorder: 4,
+    railBorderWidth: 1,
     railBorderColor: '#bec8d9',
     railBgColor: '#f8fafc',
 

src/components/sliders/defaults.js

@@ -11,9 +11,9 @@
 var Lib = require('../../lib');
 
 var attributes = require('./attributes');
-var contants = require('./constants');
+var constants = require('./constants');
 
-var name = contants.name;
+var name = constants.name;
 var stepAttrs = attributes.steps;
 
 
@@ -73,12 +73,17 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
     coerce('transition.duration');
     coerce('transition.easing');
 
-    Lib.coerceFont(coerce, 'font', layoutOut.font);
-    Lib.coerceFont(coerce, 'currentvalue.font', layoutOut.font);
-
-    coerce('bgcolor', layoutOut.paper_bgcolor);
+    coerce('bgcolor');
+    coerce('activebgcolor');
     coerce('bordercolor');
     coerce('borderwidth');
+    coerce('ticklen');
+    coerce('tickwidth');
+    coerce('tickcolor');
+    coerce('minorticklen');
+
+    Lib.coerceFont(coerce, 'font', layoutOut.font);
+    Lib.coerceFont(coerce, 'currentvalue.font', sliderOut.font);
 }
 
 function stepsDefaults(sliderIn, sliderOut) {

src/components/sliders/draw.js

@@ -177,7 +177,7 @@ function findDimensions(gd, sliderOpts) {
     sliderOpts.labelStride = Math.max(1, Math.ceil(computedSpacePerLabel / availableSpacePerLabel));
     sliderOpts.labelHeight = labelHeight;
 
-    sliderOpts.height = sliderOpts.currentValueTotalHeight + constants.tickOffset + constants.tickLength + constants.labelOffset + sliderOpts.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
+    sliderOpts.height = sliderOpts.currentValueTotalHeight + constants.tickOffset + sliderOpts.ticklen + constants.labelOffset + sliderOpts.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
 
     var xanchor = 'left';
     if(anchorUtils.isRightAnchor(sliderOpts)) {
@@ -292,9 +292,9 @@ function drawGrip(sliderGroup, gd, sliderOpts) {
         rx: constants.gripRadius,
         ry: constants.gripRadius,
     })
-        .call(Color.stroke, constants.gripBorderColor)
-        .call(Color.fill, constants.gripBgColor)
-        .style('stroke-width', constants.gripBorderWidth + 'px');
+        .call(Color.stroke, sliderOpts.bordercolor)
+        .call(Color.fill, sliderOpts.bgcolor)
+        .style('stroke-width', sliderOpts.borderwidth + 'px');
 }
 
 function drawLabel(item, data, sliderOpts) {
@@ -335,7 +335,7 @@ function drawLabelGroup(sliderGroup, sliderOpts) {
 
         Lib.setTranslate(item,
             normalizedValueToPosition(sliderOpts, d.fraction),
-            constants.tickOffset + constants.tickLength + sliderOpts.labelHeight + constants.labelOffset + sliderOpts.currentValueTotalHeight
+            constants.tickOffset + sliderOpts.ticklen + sliderOpts.labelHeight + constants.labelOffset + sliderOpts.currentValueTotalHeight
         );
     });
 
@@ -398,7 +398,7 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
 
         d3.event.stopPropagation();
         d3.event.preventDefault();
-        grip.call(Color.fill, constants.gripBgActiveColor);
+        grip.call(Color.fill, sliderOpts.activebgcolor);
 
         var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
         handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
@@ -409,7 +409,7 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
         });
 
         $gd.on('mouseup', function() {
-            grip.call(Color.fill, constants.gripBgColor);
+            grip.call(Color.fill, sliderOpts.bgcolor);
             $gd.on('mouseup', null);
             $gd.on('mousemove', null);
         });
@@ -426,7 +426,7 @@ function drawTicks(sliderGroup, sliderOpts) {
     tick.exit().remove();
 
     tick.attr({
-        width: constants.tickWidth,
+        width: sliderOpts.tickwidth + 'px',
         'shape-rendering': 'crispEdges'
     });
 
@@ -435,11 +435,11 @@ function drawTicks(sliderGroup, sliderOpts) {
         var item = d3.select(this);
 
         item
-            .attr({height: isMajor ? constants.tickLength : constants.minorTickLength})
-            .call(Color.fill, isMajor ? constants.tickColor : constants.minorTickColor);
+            .attr({height: isMajor ? sliderOpts.ticklen : sliderOpts.minorticklen})
+            .call(Color.fill, isMajor ? sliderOpts.tickcolor : sliderOpts.tickcolor);
 
         Lib.setTranslate(item,
-            normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * constants.tickWidth,
+            normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * sliderOpts.tickwidth,
             (isMajor ? constants.tickOffset : constants.minorTickOffset) + sliderOpts.currentValueTotalHeight
         );
     });
@@ -498,9 +498,9 @@ function drawTouchRect(sliderGroup, gd, sliderOpts) {
 
     rect.attr({
         width: sliderOpts.inputAreaLength,
-        height: Math.max(sliderOpts.inputAreaWidth, constants.tickOffset + constants.tickLength + sliderOpts.labelHeight)
+        height: Math.max(sliderOpts.inputAreaWidth, constants.tickOffset + sliderOpts.ticklen + sliderOpts.labelHeight)
     })
-        .call(Color.fill, constants.gripBgColor)
+        .call(Color.fill, sliderOpts.bgcolor)
         .attr('opacity', 0);
 
     Lib.setTranslate(rect, 0, sliderOpts.currentValueTotalHeight);
@@ -522,9 +522,9 @@ function drawRail(sliderGroup, sliderOpts) {
         ry: constants.railRadius,
         'shape-rendering': 'crispEdges'
     })
-        .call(Color.stroke, constants.railBorderColor)
-        .call(Color.fill, constants.railBgColor)
-        .style('stroke-width', '1px');
+        .call(Color.stroke, sliderOpts.bordercolor)
+        .call(Color.fill, sliderOpts.bgcolor)
+        .style('stroke-width', sliderOpts.borderwidth + 'px');
 
     Lib.setTranslate(rect,
         constants.railInset,

src/components/updatemenus/defaults.js

@@ -11,9 +11,9 @@
 var Lib = require('../../lib');
 
 var attributes = require('./attributes');
-var contants = require('./constants');
+var constants = require('./constants');
 
-var name = contants.name;
+var name = constants.name;
 var buttonAttrs = attributes.buttons;
 
 

test/image/mocks/sliders.json

@@ -39,6 +39,9 @@
       "xanchor": "right",
       "y": -0.1,
       "yanchor": "top",
+      "currentvalue": {
+        "visible": false
+      },
 
       "transition": {
         "duration": 150,
@@ -47,7 +50,7 @@
 
       "pad": {
         "r": 20,
-        "t": 20
+        "t": 60
       },
 
       "font": {}
@@ -69,6 +72,42 @@
         "label": "green",
         "method": "restyle",
         "args": [{"marker.color": "green"}]
+      }, {
+        "label": "orange",
+        "method": "restyle",
+        "args": [{"marker.color": "orange"}]
+      }, {
+        "label": "yellow",
+        "method": "restyle",
+        "args": [{"marker.color": "yellow"}]
+      }, {
+        "label": "green",
+        "method": "restyle",
+        "args": [{"marker.color": "green"}]
+      }, {
+        "label": "orange",
+        "method": "restyle",
+        "args": [{"marker.color": "orange"}]
+      }, {
+        "label": "yellow",
+        "method": "restyle",
+        "args": [{"marker.color": "yellow"}]
+      }, {
+        "label": "green",
+        "method": "restyle",
+        "args": [{"marker.color": "green"}]
+      }, {
+        "label": "orange",
+        "method": "restyle",
+        "args": [{"marker.color": "orange"}]
+      }, {
+        "label": "yellow",
+        "method": "restyle",
+        "args": [{"marker.color": "yellow"}]
+      }, {
+        "label": "green",
+        "method": "restyle",
+        "args": [{"marker.color": "green"}]
       }, {
         "label": "blue",
         "method": "restyle",
@@ -95,7 +134,27 @@
         "t": 20
       },
 
-      "font": {}
+      "bgcolor": "red",
+      "bordercolor": "blue",
+      "borderwidth": 2,
+      "activebgcolor": "green",
+      "ticklen": 20,
+      "tickcolor": "purple",
+      "minorticklen": 10,
+      "tickwidth": 2,
+
+      "font": {
+        "color": "purple",
+        "size": 15
+      },
+      "currentvalue": {
+        "prefix": "color:",
+        "xanchor": "right",
+        "font": {
+          "color": "orange",
+          "size": 20
+        }
+      }
     }],
     "xaxis": {
       "range": [0, 2],