Merge pull request #21459 from gitstart/fix/range-control

Controls: Fix glitchy range control
storybookjs · Mar 16, 2023 · f751229 · f751229
2 parents ebc763a + 78b0e73
commit f751229
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/code/ui/blocks/src/controls/Range.tsx b/code/ui/blocks/src/controls/Range.tsx
@@ -163,6 +163,17 @@ const RangeLabel = styled.span({
   fontVariantNumeric: 'tabular-nums',
 });
 
+const RangeCurrentAndMaxLabel = styled(RangeLabel)<{
+  numberOFDecimalsPlaces: number;
+  max: number;
+}>(({ numberOFDecimalsPlaces, max }) => ({
+  // Fixed width of "current / max" label to avoid slider width changes
+  // 3 = size of separator " / "
+  width: `${numberOFDecimalsPlaces + max.toString().length * 2 + 3}ch`,
+  textAlign: 'right',
+  flexShrink: 0,
+}));
+
 const RangeWrapper = styled.div({
   display: 'flex',
   alignItems: 'center',
@@ -208,9 +219,9 @@ export const RangeControl: FC<RangeProps> = ({
         onChange={handleChange}
         {...{ name, value, min, max, step, onFocus, onBlur }}
       />
-      <RangeLabel>
+      <RangeCurrentAndMaxLabel numberOFDecimalsPlaces={numberOFDecimalsPlaces} max={max}>
         {`${hasValue ? value.toFixed(numberOFDecimalsPlaces) : '--'}`} / {max}
-      </RangeLabel>
+      </RangeCurrentAndMaxLabel>
     </RangeWrapper>
   );
 };