fix: slider to range step values (#14460)

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

packages/react/src/components/Slider/Slider.tsx

@@ -455,6 +455,23 @@ export default class Slider extends PureComponent<SliderProps> {
     return Math.max(min, Math.min(val, max));
   }
 
+  /**
+   * Takes a value and ensures it fits to the steps of the range
+   * @param value
+   * @returns value of the nearest step
+   */
+  nearestStepValue(value) {
+    const tempInput = document.createElement('input');
+
+    tempInput.type = 'range';
+    tempInput.min = `${this.props.min}`;
+    tempInput.max = `${this.props.max}`;
+    tempInput.step = `${this.props.step}`;
+    tempInput.value = `${value}`;
+
+    return parseFloat(tempInput.value);
+  }
+
   /**
    * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
    * started on somewhere other than the thumb without a corresponding "move"
@@ -534,7 +551,7 @@ export default class Slider extends PureComponent<SliderProps> {
     }
 
     const { value, left } = this.calcValue({ clientX });
-    this.setState({ value, left, isValid: true });
+    this.setState({ value: this.nearestStepValue(value), left, isValid: true });
   };
 
   /**
@@ -588,7 +605,7 @@ export default class Slider extends PureComponent<SliderProps> {
           : this.state.value) + delta,
     });
 
-    this.setState({ value, left, isValid: true });
+    this.setState({ value: this.nearestStepValue(value), left, isValid: true });
   };
 
   /**