Fix: Allow slide step prefix and suffix (fixes #173)

README.md

@@ -68,6 +68,10 @@ guide the learner’s interaction with the component.
 
 **\_scaleStep** (number): Defines the amount the scale should be incremented by.
 
+**scaleStepPrefix** (string): Prefix to add to each slider step. For example, a "$" can be used as a prefix to indicate currency in dollars (ex. $100).
+
+**scaleStepSuffix** (string): Suffix to add to each slider step. For example, a "V" can be used as a suffix to indicate voltage (ex. 4V).
+
 **\_correctAnswer** (string): Used to set a single value on the slider scale as the correct answer. (Since the attribute expects a string, numeric values must appear in JSON within quotes.)
 
 **\_correctRange** (object):  Used to set a range of values on the slider scale as the correct answer. The range is determined by **\_bottom** and **\_top**.

example.json

@@ -22,6 +22,8 @@
         "_scaleStart": 1,
         "_scaleEnd": 10,
         "_scaleStep": 1,
+        "scaleStepPrefix": "",
+        "scaleStepSuffix": "",
         "_correctAnswer": "",
         "_correctRange": {
             "_bottom": 4,

properties.schema

@@ -193,6 +193,26 @@
       "validators": ["number"],
       "help": "The amount the scale should increment by"
     },
+    "scaleStepPrefix": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "title": "Prefix to add to each slider step",
+      "inputType": "Text",
+      "validators": [],
+      "help": "For instance, a '$' can be used as a prefix to indicate currency in dollars (ex. $100)",
+      "translatable": true
+    },
+    "scaleStepSuffix": {
+      "type": "string",
+      "required": false,
+      "default": "",
+      "title": "Suffix to add to each slider step",
+      "inputType": "Text",
+      "validators": [],
+      "help": "For instance, a 'V' can be used as a suffix to indicate voltage (ex. 4V)",
+      "translatable": true
+    },
     "_correctAnswer": {
       "type": "string",
       "default": "",

schema/component.schema.json

@@ -114,6 +114,26 @@
           "description": "The amount the scale should increment by",
           "default": 1
         },
+        "scaleStepPrefix": {
+          "type": "string",
+          "title": "Prefix to add to each slider step",
+          "description": "For instance, a '$' can be used as a prefix to indicate currency in dollars (ex. $100)",
+          "default": "",
+          "properties": {},
+          "_adapt": {
+            "translatable": true
+          }
+        },
+        "scaleStepSuffix": {
+          "type": "string",
+          "title": "Suffix to add to each slider step",
+          "description": "For instance, a 'V' can be used as a suffix to indicate voltage (ex. 4V)",
+          "default": "",
+          "properties": {},
+          "_adapt": {
+            "translatable": true
+          }
+        },
         "_correctAnswer": {
           "type": "string",
           "title": "Correct answer",

templates/slider.jsx

@@ -32,7 +32,9 @@ export default function Slider (props) {
     _showScale,
     _showNumber,
     _showScaleNumbers,
-    _showScaleIndicator
+    _showScaleIndicator,
+    scaleStepPrefix,
+    scaleStepSuffix
   } = props;
 
   const sliderScaleRef = useRef(null);
@@ -101,7 +103,7 @@ export default function Slider (props) {
           {labelStart &&
           <div className="slider__label-start">
             <div className="slider__label-start-inner">
-              <span className="aria-label">{_globals._components._slider.labelStart} {_scaleStart}</span>
+              <span className="aria-label">{_globals._components._slider.labelStart} {scaleStepPrefix}{_scaleStart}{scaleStepSuffix}</span>
               {labelStart}
             </div>
           </div>
@@ -110,7 +112,7 @@ export default function Slider (props) {
           {labelEnd &&
           <div className="slider__label-end">
             <div className="slider__label-end-inner">
-              <span className="aria-label">{_globals._components._slider.labelEnd} {_scaleEnd}</span>
+              <span className="aria-label">{_globals._components._slider.labelEnd} {scaleStepPrefix}{_scaleEnd}{scaleStepSuffix}</span>
               {labelEnd}
             </div>
           </div>
@@ -134,7 +136,7 @@ export default function Slider (props) {
                   style={{ left: Math.round(normalisedPosition * sliderScaleWidth) }}
                   onClick={onNumberSelected}
                 >
-                  {value}
+                  {scaleStepPrefix}{value}{scaleStepSuffix}
                 </div>
               );
             })
@@ -150,7 +152,9 @@ export default function Slider (props) {
                     key={correctAnswer}
                     style={{ left: `${mapIndexToPixels(getIndexFromValue(correctAnswer))}px` }}
                   >
-                    {_showNumber && correctAnswer}
+                    {_showNumber &&
+                      `${scaleStepPrefix}${correctAnswer}${scaleStepSuffix}`
+                    }
                   </div>
                 );
               })
@@ -166,7 +170,9 @@ export default function Slider (props) {
               tabIndex="-1"
               ref={sliderNumberSelectionRef}
             >
-              {_showNumber && _selectedItem.value}
+              {_showNumber &&
+                `${scaleStepPrefix}${_selectedItem.value}${scaleStepSuffix}`
+              }
             </div>
           }
         </div>