Add suffix to currentvalue slider label

Author: rreusser

src/components/sliders/attributes.js

@@ -193,14 +193,17 @@ module.exports = {
         prefix: {
             valType: 'string',
             role: 'info',
-            description: [
-                'When currentvalue.visible is true, this sets the prefix of the lable. If provided,',
-                'it will be joined to the current value with a single space between.'
-            ].join(' ')
+            description: 'When currentvalue.visible is true, this sets the prefix of the label.'
+        },
+
+        suffix: {
+            valType: 'string',
+            role: 'info',
+            description: 'When currentvalue.visible is true, this sets the suffix of the label.'
         },
 
         font: extendFlat({}, fontAttrs, {
-            description: 'Sets the font of the current value lable text.'
+            description: 'Sets the font of the current value label text.'
         }),
     },
 

src/components/sliders/defaults.js

@@ -68,6 +68,7 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
     coerce('currentvalue.visible');
     coerce('currentvalue.xanchor');
     coerce('currentvalue.prefix');
+    coerce('currentvalue.suffix');
     coerce('currentvalue.offset');
 
     coerce('transition.duration');

src/components/sliders/draw.js

@@ -259,7 +259,7 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
         .classed('user-select-none', true)
         .attr('text-anchor', textAnchor);
 
-    var str = sliderOpts.currentvalue.prefix ? (sliderOpts.currentvalue.prefix + ' ') : '';
+    var str = sliderOpts.currentvalue.prefix ? sliderOpts.currentvalue.prefix : '';
 
     if(typeof valueOverride === 'string') {
         str += valueOverride;
@@ -268,6 +268,10 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
         str += curVal;
     }
 
+    if(sliderOpts.currentvalue.suffix) {
+        str += sliderOpts.currentvalue.suffix;
+    }
+
     text.call(Drawing.font, sliderOpts.currentvalue.font)
         .text(str)
         .call(svgTextUtils.convertToTspans);

test/image/baselines/sliders.png

@@ -148,7 +148,8 @@
         "size": 15
       },
       "currentvalue": {
-        "prefix": "color:",
+        "prefix": "prefix ",
+        "suffix": " suffix",
         "xanchor": "right",
         "font": {
           "color": "orange",