feat(slider): expose formatLabel to value tooltip

- expose formatLabel to thumbWrapper for twoHandles as well as single handle. - add examples on storybooks on how it could be used
carbon-design-system · Jun 27, 2024 · 84ce93b · 84ce93b
1 parent 0d2376a
commit 84ce93b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js
@@ -53,6 +53,41 @@ export const SliderWithHiddenInputs = () => (
   />
 );
 
+export const SliderWithHiddenInputsAndFormatLabel = () => (
+  <Slider
+    labelText="Slider label with percentage"
+    value={50}
+    min={0}
+    max={100}
+    stepMultiplier={10}
+    step={1}
+    noValidate
+    hideTextInput
+    formatLabel={(val) => `${val}%`}
+  />
+);
+
+export const SliderWithHiddenInputsAndCustomFormat = () => (
+  <Slider
+    labelText="Slider label with low/medium/high"
+    value={50}
+    min={0}
+    max={100}
+    stepMultiplier={10}
+    step={1}
+    noValidate
+    hideTextInput
+    formatLabel={(val) => {
+      if (val < 25) {
+        return 'Low';
+      } else if (val > 75) {
+        return 'High';
+      }
+      return 'Medium';
+    }}
+  />
+);
+
 export const ControlledSlider = () => {
   const [val, setVal] = useState(87);
   return (

diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
@@ -153,7 +153,7 @@ export interface SliderProps
   disabled?: boolean;
 
   /**
-   * The callback to format the label associated with the minimum/maximum value.
+   * The callback to format the label associated with the minimum/maximum value and the value tooltip when hideTextInput is true.
    */
   formatLabel?: (value: number, label: string | undefined) => string;
 
@@ -1521,7 +1521,7 @@ class Slider extends PureComponent<SliderProps> {
                   <ThumbWrapper
                     hasTooltip={hideTextInput}
                     className={lowerThumbWrapperClasses}
-                    label={`${value}`}
+                    label={`${formatLabel(value, '')}`}
                     align="top"
                     {...lowerThumbWrapperProps}>
                     <div
@@ -1555,7 +1555,7 @@ class Slider extends PureComponent<SliderProps> {
                     <ThumbWrapper
                       hasTooltip={hideTextInput}
                       className={upperThumbWrapperClasses}
-                      label={`${valueUpper}`}
+                      label={`${formatLabel(valueUpper || 0, '')}`}
                       align="top"
                       {...upperThumbWrapperProps}>
                       <div