@carbon/react 1.90.0 → 1.91.0-rc.0

package/es/components/Slider/Slider.js

@@ -5,15 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { PureComponent, createRef } from 'react';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useReducer, useRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.js';
+import { Enter, ArrowDown, ArrowLeft, ArrowUp, ArrowRight } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import { deprecate } from '../../prop-types/deprecate.js';
-import { FeatureFlagContext } from '../FeatureFlags/index.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import '../Text/index.js';
 import '../Tooltip/DefinitionTooltip.js';
@@ -76,752 +75,834 @@ var HandlePosition = /*#__PURE__*/function (HandlePosition) {
   HandlePosition["LOWER"] = "lower";
   HandlePosition["UPPER"] = "upper";
   return HandlePosition;
-}(HandlePosition || {});
-class Slider extends PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      value: this.props.value,
-      valueUpper: this.props.unstable_valueUpper,
-      left: 0,
-      leftUpper: 0,
-      needsOnRelease: false,
-      isValid: true,
-      isValidUpper: true,
-      activeHandle: undefined,
-      correctedValue: null,
-      correctedPosition: null,
-      isRtl: false
-    });
-    _defineProperty(this, "thumbRef", void 0);
-    _defineProperty(this, "thumbRefUpper", void 0);
-    _defineProperty(this, "filledTrackRef", void 0);
-    _defineProperty(this, "element", null);
-    _defineProperty(this, "inputId", '');
-    _defineProperty(this, "track", void 0);
-    _defineProperty(this, "handleDrag", event => {
-      if (event instanceof globalThis.MouseEvent || event instanceof globalThis.TouchEvent) {
-        this.onDrag(event);
-      }
-    });
-    /**
-     * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
-     * started on somewhere other than the thumb without a corresponding "move"
-     * event.
-     */
-    _defineProperty(this, "onDragStart", evt => {
-      // Do nothing if component is disabled
-      if (this.props.disabled || this.props.readOnly) {
-        return;
-      }
-
-      // We're going to force focus on one of the handles later on here, b/c we're
-      // firing on a mousedown event, we need to call event.preventDefault() to
-      // keep the focus from leaving the HTMLElement.
-      // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#notes
-      evt.preventDefault();
-
-      // Add drag stop handlers
-      DRAG_STOP_EVENT_TYPES.forEach(element => {
-        this.element?.ownerDocument.addEventListener(element, this.onDragStop);
-      });
-
-      // Add drag handlers
-      DRAG_EVENT_TYPES.forEach(element => {
-        this.element?.ownerDocument.addEventListener(element, this.handleDrag);
-      });
-      const clientX = this.getClientXFromEvent(evt.nativeEvent);
-      let activeHandle;
-      if (this.hasTwoHandles()) {
-        if (evt.target == this.thumbRef.current) {
-          activeHandle = HandlePosition.LOWER;
-        } else if (evt.target == this.thumbRefUpper.current) {
-          activeHandle = HandlePosition.UPPER;
-        } else if (clientX) {
-          const distanceToLower = this.calcDistanceToHandle(HandlePosition.LOWER, clientX);
-          const distanceToUpper = this.calcDistanceToHandle(HandlePosition.UPPER, clientX);
-          if (distanceToLower <= distanceToUpper) {
-            activeHandle = HandlePosition.LOWER;
-          } else {
-            activeHandle = HandlePosition.UPPER;
-          }
-        }
-      }
+}(HandlePosition || {}); // TODO: Delete this type and directory type the properties in the function.
+const Slider = props => {
+  // TODO: Move destructured `props` from the IIFE to here.
 
-      // Force focus to the appropriate handle.
-      const focusOptions = {
-        preventScroll: true
-      };
-      if (this.hasTwoHandles()) {
-        if (this.thumbRef.current && activeHandle === HandlePosition.LOWER) {
-          this.thumbRef.current.focus(focusOptions);
-        } else if (this.thumbRefUpper.current && activeHandle === HandlePosition.UPPER) {
-          this.thumbRefUpper.current.focus(focusOptions);
-        }
-      } else if (this.thumbRef.current) {
-        this.thumbRef.current.focus(focusOptions);
-      }
-      this.setState({
-        activeHandle
-      });
+  const initialState = {
+    value: props.value,
+    valueUpper: props.unstable_valueUpper,
+    left: 0,
+    leftUpper: 0,
+    needsOnRelease: false,
+    isValid: true,
+    isValidUpper: true,
+    activeHandle: undefined,
+    correctedValue: null,
+    correctedPosition: null,
+    isRtl: false
+  };
 
-      // Perform first recalculation since we probably didn't click exactly in the
-      // middle of the thumb.
-      this.onDrag(evt.nativeEvent, activeHandle);
-    });
-    /**
-     * Removes "drag" and "drag stop" event handlers and calls sets the flag
-     * indicating that the `onRelease` callback should be called.
-     */
-    _defineProperty(this, "onDragStop", () => {
-      // Do nothing if component is disabled
-      if (this.props.disabled || this.props.readOnly) {
-        return;
-      }
+  // TODO: Investigate using generics on the hook.
+  const [state, setState] = useReducer((prev, args) => ({
+    ...prev,
+    ...args
+  }), initialState);
 
-      // Remove drag stop handlers
-      DRAG_STOP_EVENT_TYPES.forEach(element => {
-        this.element?.ownerDocument.removeEventListener(element, this.onDragStop);
-      });
+  // TODO: Investigate getting rid of these references.
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  const propsRef = useRef(props);
+  useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+  const thumbRef = useRef(null);
+  const thumbRefUpper = useRef(null);
+  const filledTrackRef = useRef(null);
+  const elementRef = useRef(null);
+  const trackRef = useRef(null);
+  const inputIdRef = useRef('');
 
-      // Remove drag handlers
-      DRAG_EVENT_TYPES.forEach(element => {
-        this.element?.ownerDocument.removeEventListener(element, this.handleDrag);
-      });
+  // TODO: Delete this function and set its return value as the value of
+  // `twoHandles`.
+  const hasTwoHandles = () => {
+    return typeof state.valueUpper !== 'undefined';
+  };
+  const twoHandles = hasTwoHandles();
 
-      // Set needsOnRelease flag so event fires on next update.
-      this.setState({
-        needsOnRelease: true,
-        isValid: true,
-        isValidUpper: true
-      });
-    });
-    /**
-     * Handles a "drag" event by recalculating the value/thumb and setting state
-     * accordingly.
-     *
-     * @param evt The event.
-     * @param activeHandle The first drag event call, we may have an explicit
-     * activeHandle value, which is to be used before state is used.
-     */
-    _defineProperty(this, "_onDrag", (evt, activeHandle) => {
-      activeHandle = activeHandle ?? this.state.activeHandle;
-      // Do nothing if component is disabled, or we have no event.
-      if (this.props.disabled || this.props.readOnly || !evt) {
-        return;
-      }
-      const clientX = this.getClientXFromEvent(evt);
-      const {
-        value,
-        left
-      } = this.calcValue({
-        clientX,
-        value: this.state.value
-      });
-      // If we're set to two handles, negotiate which drag handle is closest to
-      // the users' interaction.
-      if (this.hasTwoHandles() && activeHandle) {
-        this.setValueLeftForHandle(activeHandle, {
-          value: this.nearestStepValue(value),
+  /**
+   * Sets up initial slider position and value in response to component mount.
+   */
+  useEffect(() => {
+    if (elementRef.current) {
+      const isRtl = document?.dir === 'rtl';
+      if (hasTwoHandles()) {
+        const {
+          value,
           left
+        } = calcValue({
+          value: stateRef.current.value,
+          useRawValue: true
         });
-      } else {
-        this.setState({
-          value: this.nearestStepValue(value),
+        const {
+          value: valueUpper,
+          left: leftUpper
+        } = calcValue({
+          value: stateRef.current.valueUpper,
+          useRawValue: true
+        });
+        setState({
+          isRtl,
+          value,
           left,
-          isValid: true
+          valueUpper,
+          leftUpper
         });
-      }
-      this.setState({
-        correctedValue: null,
-        correctedPosition: null
-      });
-    });
-    /**
-     * Throttles calls to `this._onDrag` by limiting events to being processed at
-     * most once every `EVENT_THROTTLE` milliseconds.
-     */
-    _defineProperty(this, "onDrag", throttle(this._onDrag, EVENT_THROTTLE, {
-      leading: true,
-      trailing: false
-    }));
-    /**
-     * Handles a `keydown` event by recalculating the value/thumb and setting
-     * state accordingly.
-     */
-    _defineProperty(this, "onKeyDown", evt => {
-      // Do nothing if component is disabled, or we don't have a valid event
-      if (this.props.disabled || this.props.readOnly) {
-        return;
-      }
-      const {
-        step = 1,
-        stepMultiplier = 4
-      } = this.props;
-      let delta = 0;
-      if (matches(evt, [ArrowDown, ArrowLeft])) {
-        delta = -step;
-      } else if (matches(evt, [ArrowUp, ArrowRight])) {
-        delta = step;
       } else {
-        // Ignore keys we don't want to handle
-        return;
-      }
-
-      // If shift was held, account for the stepMultiplier
-      if (evt.shiftKey) {
-        delta *= stepMultiplier;
-      }
-      if (this.hasTwoHandles() && this.state.activeHandle) {
-        const currentValue = this.state.activeHandle === HandlePosition.LOWER ? this.state.value : this.state.valueUpper;
         const {
           value,
           left
-        } = this.calcValue({
-          value: this.calcValueForDelta(currentValue ?? this.props.min, delta, this.props.step)
-        });
-        this.setValueLeftForHandle(this.state.activeHandle, {
-          value: this.nearestStepValue(value),
-          left
+        } = calcValue({
+          value: stateRef.current.value,
+          useRawValue: true
         });
-      } else {
-        const {
+        setState({
+          isRtl,
           value,
           left
-        } = this.calcValue({
-          // Ensures custom value from `<input>` won't cause skipping next stepping
-          // point with right arrow key, e.g. Typing 51 in `<input>`, moving focus
-          // onto the thumb and the hitting right arrow key should yield 52 instead
-          // of 54.
-          value: this.calcValueForDelta(this.state.value, delta, this.props.step)
-        });
-        this.setState({
-          value: this.nearestStepValue(value),
-          left,
-          isValid: true
         });
       }
-      this.setState({
-        correctedValue: null,
-        correctedPosition: null
-      });
-    });
-    /**
-     * Provides the two-way binding for the input field of the Slider. It also
-     * Handles a change to the input field by recalculating the value/thumb and
-     * setting state accordingly.
-     */
-    _defineProperty(this, "onChange", evt => {
-      // Do nothing if component is disabled
-      if (this.props.disabled || this.props.readOnly) {
-        return;
-      }
-
-      // Do nothing if we have no valid event, target, or value
-      if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
-        return;
-      }
+    }
+    return () => {
+      DRAG_STOP_EVENT_TYPES.forEach(element => elementRef.current?.ownerDocument.removeEventListener(element, onDragStop));
+      DRAG_EVENT_TYPES.forEach(element => elementRef.current?.ownerDocument.removeEventListener(element, handleDrag));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    // TODO: Uncomment this code and delete all of the `filledTrackRef.current`
+    // checks.
+    // const el = filledTrackRef.current;
+    //
+    // if (!el) return;
 
-      // Avoid calling calcValue for invalid numbers, but still update the state.
-      const activeHandle = evt.target.dataset.handlePosition ?? HandlePosition.LOWER;
-      const targetValue = Number.parseFloat(evt.target.value);
-      if (this.hasTwoHandles()) {
-        if (isNaN(targetValue)) {
-          this.setValueForHandle(activeHandle, evt.target.value);
-        } else if (this.isValidValueForPosition({
-          handle: activeHandle,
-          value: targetValue,
-          min: this.props.min,
-          max: this.props.max
-        })) {
-          this.processNewInputValue(evt.target);
-        } else {
-          this.setValueForHandle(activeHandle, targetValue);
-        }
-      } else {
-        if (isNaN(targetValue)) {
-          this.setState({
-            value: evt.target.value
-          });
-        } else if (this.isValidValue({
-          value: targetValue,
-          min: this.props.min,
-          max: this.props.max
-        })) {
-          this.processNewInputValue(evt.target);
-        } else {
-          this.setState({
-            value: targetValue
-          });
-        }
-      }
-    });
-    /**
-     * Checks for validity of input value after clicking out of the input. It also
-     * Handles state change to isValid state.
-     */
-    _defineProperty(this, "onBlur", evt => {
-      // Do nothing if we have no valid event, target, or value
-      if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
-        return;
+    // Fire onChange event handler if present, if there's a usable value, and
+    // if the value is different from the last one
+    if (hasTwoHandles()) {
+      if (filledTrackRef.current) {
+        filledTrackRef.current.style.transform = state.isRtl ? `translate(${100 - state.leftUpper}%, -50%) scaleX(${(state.leftUpper - state.left) / 100})` : `translate(${state.left}%, -50%) scaleX(${(state.leftUpper - state.left) / 100})`;
       }
-      const {
-        value: targetValue
-      } = evt.target;
-      this.processNewInputValue(evt.target);
-      this.props.onBlur?.({
-        value: targetValue,
-        handlePosition: evt.target.dataset.handlePosition
-      });
-    });
-    _defineProperty(this, "onInputKeyDown", evt => {
-      // Do nothing if component is disabled, or we don't have a valid event.
-      if (this.props.disabled || this.props.readOnly || !(evt.target instanceof HTMLInputElement)) {
-        return;
+    } else {
+      if (filledTrackRef.current) {
+        filledTrackRef.current.style.transform = state.isRtl ? `translate(100%, -50%) scaleX(-${state.left / 100})` : `translate(0%, -50%) scaleX(${state.left / 100})`;
       }
+    }
+    // TODO: Investigate whether the missing dependency should be added.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.left, state.leftUpper, state.isRtl]);
 
-      // Do nothing if we have no valid event, target, or value.
-      if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
-        return;
-      }
-      if (matches(evt, [Enter])) {
-        this.processNewInputValue(evt.target);
-      }
-    });
-    _defineProperty(this, "processNewInputValue", input => {
-      this.setState({
-        correctedValue: null,
-        correctedPosition: null
+  // Fire onChange when value(s) change
+  const prevValsRef = useRef(null);
+  useEffect(() => {
+    const prev = prevValsRef.current;
+    if (prev && (prev.value !== state.value || prev.valueUpper !== state.valueUpper) && typeof props.onChange === 'function') {
+      props.onChange({
+        value: state.value,
+        valueUpper: state.valueUpper
       });
-      const targetValue = Number.parseFloat(input.value);
-      const validity = !isNaN(targetValue);
-
-      // When there are two handles, we'll also have the data-handle-position
-      // attribute to consider the other value before settling on the validity to
-      // set.
-      const handlePosition = input.dataset.handlePosition;
-      if (handlePosition === HandlePosition.LOWER) {
-        this.setState({
-          isValid: validity
-        });
-      } else if (handlePosition === HandlePosition.UPPER) {
-        this.setState({
-          isValidUpper: validity
-        });
-      }
-      this.setState({
-        isValid: validity
+    }
+    prevValsRef.current = {
+      value: state.value,
+      valueUpper: state.valueUpper
+    };
+    // TODO: Investigate whether the missing dependency should be added.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.value, state.valueUpper, props.onChange]);
+  useEffect(() => {
+    // Fire onRelease event handler if present and if needed
+    if (state.needsOnRelease && typeof props.onRelease === 'function') {
+      props.onRelease({
+        value: state.value,
+        valueUpper: state.valueUpper
       });
-      if (validity) {
-        const adjustedValue = handlePosition ? this.getAdjustedValueForPosition({
-          handle: handlePosition,
-          value: targetValue,
-          min: this.props.min,
-          max: this.props.max
-        }) : this.getAdjustedValue({
-          value: targetValue,
-          min: this.props.min,
-          max: this.props.max
-        });
-        if (adjustedValue !== targetValue) {
-          this.setState({
-            correctedValue: targetValue.toString(),
-            correctedPosition: handlePosition
-          });
-        } else {
-          this.setState({
-            correctedValue: null,
-            correctedPosition: null
-          });
-        }
+      // Reset the flag
+      setState({
+        needsOnRelease: false
+      });
+    }
+    // TODO: Investigate whether the missing dependency should be added.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.needsOnRelease, state.value, state.valueUpper, props.onRelease]);
+  const prevSyncKeysRef = useRef(null);
+  useEffect(() => {
+    const prev = prevSyncKeysRef.current;
+    const next = [props.value, props.unstable_valueUpper, props.max, props.min];
+
+    // If value from props does not change, do nothing here.
+    // Otherwise, do prop -> state sync without "value capping".
+    if (!prev || prev[0] !== next[0] || prev[1] !== next[1] || prev[2] !== next[2] || prev[3] !== next[3]) {
+      setState(calcValue({
+        value: props.value,
+        useRawValue: true
+      }));
+      if (typeof props.unstable_valueUpper !== 'undefined') {
         const {
-          value,
-          left
-        } = this.calcValue({
-          value: adjustedValue,
+          value: valueUpper,
+          left: leftUpper
+        } = calcValue({
+          value: props.unstable_valueUpper,
           useRawValue: true
         });
-        if (handlePosition) {
-          this.setValueLeftForHandle(handlePosition, {
-            value: this.nearestStepValue(value),
-            left
-          });
-        } else {
-          this.setState({
-            value,
-            left
-          });
-        }
+        setState({
+          valueUpper,
+          leftUpper
+        });
+      } else {
+        setState({
+          valueUpper: undefined,
+          leftUpper: undefined
+        });
       }
+      prevSyncKeysRef.current = next;
+    }
+    // TODO: Investigate whether the missing dependency should be added.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value, props.unstable_valueUpper, props.max, props.min]);
+
+  /**
+   * Rounds a given value to the nearest step defined by the slider's `step`
+   * prop.
+   *
+   * @param value - The value to adjust to the nearest step. Defaults to `0`.
+   * @returns The value rounded to the precision determined by the step.
+   */
+  const nearestStepValue = (value = 0) => {
+    // TODO: Use a nullish coalescing operator.
+    const decimals = (props.step?.toString().split('.')[1] || '').length;
+    return Number(value.toFixed(decimals));
+  };
+  const handleDrag = event => {
+    if (event instanceof globalThis.MouseEvent || event instanceof globalThis.TouchEvent) {
+      onDrag(event);
+    }
+  };
+
+  /**
+   * Sets up "drag" event handlers and calls `onDrag` in case dragging
+   * started on somewhere other than the thumb without a corresponding "move"
+   * event.
+   */
+  const onDragStart = evt => {
+    // Do nothing if component is disabled
+    if (props.disabled || props.readOnly) {
+      return;
+    }
+
+    // We're going to force focus on one of the handles later on here, b/c we're
+    // firing on a mousedown event, we need to call event.preventDefault() to
+    // keep the focus from leaving the HTMLElement.
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#notes
+    evt.preventDefault();
+
+    // TODO: Abstract `elementRef.current?.ownerDocument` to a variable that can
+    // be used here and everywhere else in this file.
+
+    // Add drag stop handlers
+    DRAG_STOP_EVENT_TYPES.forEach(element => {
+      elementRef.current?.ownerDocument.addEventListener(element, onDragStop);
     });
-    _defineProperty(this, "calcLeftPercent", ({
-      clientX,
-      value,
-      range
-    }) => {
-      const boundingRect = this.element?.getBoundingClientRect?.();
-      let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
 
-      // Enforce a minimum width of at least 1 for calculations
-      if (width <= 0) {
-        width = 1;
+    // Add drag handlers
+    DRAG_EVENT_TYPES.forEach(element => {
+      elementRef.current?.ownerDocument.addEventListener(element, handleDrag);
+    });
+    const clientX = getClientXFromEvent(evt.nativeEvent);
+    let activeHandle;
+    if (hasTwoHandles()) {
+      if (evt.target == thumbRef.current) {
+        activeHandle = HandlePosition.LOWER;
+      } else if (evt.target == thumbRefUpper.current) {
+        activeHandle = HandlePosition.UPPER;
+      } else if (clientX) {
+        const distanceToLower = calcDistanceToHandle(HandlePosition.LOWER, clientX);
+        const distanceToUpper = calcDistanceToHandle(HandlePosition.UPPER, clientX);
+        if (distanceToLower <= distanceToUpper) {
+          activeHandle = HandlePosition.LOWER;
+        } else {
+          activeHandle = HandlePosition.UPPER;
+        }
       }
+    }
 
-      // If a clientX is specified, use it to calculate the leftPercent. If not,
-      // use the provided value to calculate it instead.
-      if (clientX) {
-        const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
-        return leftOffset / width;
-      } else if (value !== null && typeof value !== 'undefined' && range) {
-        // Prevent NaN calculation if the range is 0.
-        return range === 0 ? 0 : (value - this.props.min) / range;
+    // Force focus to the appropriate handle.
+    const focusOptions = {
+      preventScroll: true
+    };
+    if (hasTwoHandles()) {
+      if (thumbRef.current && activeHandle === HandlePosition.LOWER) {
+        thumbRef.current.focus(focusOptions);
+      } else if (thumbRefUpper.current && activeHandle === HandlePosition.UPPER) {
+        thumbRefUpper.current.focus(focusOptions);
       }
-      // We should never end up in this scenario, but in case we do, and to
-      // re-assure Typescript, return 0.
-      return 0;
+    } else if (thumbRef.current) {
+      thumbRef.current.focus(focusOptions);
+    }
+    setState({
+      activeHandle
     });
-    /**
-     * Calculates the discrete value (snapped to the nearest step) along
-     * with the corresponding handle position percentage.
-     */
-    _defineProperty(this, "calcDiscreteValueAndPercent", ({
-      leftPercent
-    }) => {
-      const {
-        step = 1,
-        min,
-        max
-      } = this.props;
-      const numSteps = Math.floor((max - min) / step) + ((max - min) % step === 0 ? 1 : 2);
-      /** Index of the step that corresponds to `leftPercent`. */
-      const stepIndex = Math.round(leftPercent * (numSteps - 1));
-      const discreteValue = stepIndex === numSteps - 1 ? max : min + step * stepIndex;
-      /** Percentage corresponding to the step index. */
-      const discretePercent = stepIndex / (numSteps - 1);
-      return {
-        discreteValue,
-        discretePercent
-      };
+
+    // Perform first recalculation since we probably didn't click exactly in the
+    // middle of the thumb.
+    onDrag(evt.nativeEvent, activeHandle);
+  };
+
+  /**
+   * Removes "drag" and "drag stop" event handlers and calls sets the flag
+   * indicating that the `onRelease` callback should be called.
+   */
+  const onDragStop = () => {
+    // Do nothing if component is disabled
+    if (props.disabled || props.readOnly) {
+      return;
+    }
+
+    // TODO: Rename parameters in `DRAG_*` loops to `type`.
+    // Remove drag stop handlers
+    DRAG_STOP_EVENT_TYPES.forEach(element => {
+      elementRef.current?.ownerDocument.removeEventListener(element, onDragStop);
     });
-    /**
-     * Calculates the slider's value and handle position based on either a
-     * mouse/touch event or an explicit value.
-     */
-    _defineProperty(this, "calcValue", ({
-      clientX,
+
+    // Remove drag handlers
+    DRAG_EVENT_TYPES.forEach(element => {
+      elementRef.current?.ownerDocument.removeEventListener(element, handleDrag);
+    });
+
+    // Set needsOnRelease flag so event fires on next update.
+    setState({
+      needsOnRelease: true,
+      isValid: true,
+      isValidUpper: true
+    });
+  };
+
+  // TODO: Rename this reference.
+  /**
+   * Handles a "drag" event by recalculating the value/thumb and setting state
+   * accordingly.
+   *
+   * @param evt The event.
+   * @param activeHandle The first drag event call, we may have an explicit
+   * activeHandle value, which is to be used before state is used.
+   */
+  const _onDragRef = useRef(null);
+  _onDragRef.current = (evt, activeHandle) => {
+    activeHandle = activeHandle ?? stateRef.current.activeHandle;
+    // Do nothing if component is disabled, or we have no event.
+    if (propsRef.current.disabled || propsRef.current.readOnly || !evt) {
+      return;
+    }
+    const clientX = getClientXFromEvent(evt);
+    const {
       value,
-      useRawValue
-    }) => {
-      const range = this.props.max - this.props.min;
-      const leftPercentRaw = this.calcLeftPercent({
-        clientX,
-        value,
-        range
+      left
+    } = calcValue({
+      clientX,
+      value: stateRef.current.value
+    });
+    // If we're set to two handles, negotiate which drag handle is closest to
+    // the users' interaction.
+    if (hasTwoHandles() && activeHandle) {
+      setValueLeftForHandle(activeHandle, {
+        value: nearestStepValue(value),
+        left
       });
-      /** `leftPercentRaw` clamped between 0 and 1. */
-      const leftPercent = clamp(leftPercentRaw, 0, 1);
-      if (useRawValue) {
-        return {
-          value,
-          left: leftPercent * 100
-        };
-      }
+    } else {
+      setState({
+        value: nearestStepValue(value),
+        left,
+        isValid: true
+      });
+    }
+    // TODO: Investigate if it would be better to not call `setState`
+    // back-to-back here and in other places.
+    setState({
+      correctedValue: null,
+      correctedPosition: null
+    });
+  };
+
+  /**
+   * Throttles calls to `_onDrag` by limiting events to being processed at
+   * most once every `EVENT_THROTTLE` milliseconds.
+   */
+  const onDrag = useMemo(() => throttle((evt, activeHandle) => {
+    _onDragRef.current?.(evt, activeHandle);
+  }, EVENT_THROTTLE, {
+    leading: true,
+    trailing: false
+  }), []);
 
-      // Use the discrete value and percentage for snapping.
+  /**
+   * Handles a `keydown` event by recalculating the value/thumb and setting
+   * state accordingly.
+   */
+  const onKeyDown = evt => {
+    // Do nothing if component is disabled, or we don't have a valid event
+    if (props.disabled || props.readOnly) {
+      return;
+    }
+    const {
+      step = 1,
+      stepMultiplier = 4
+    } = props;
+    let delta = 0;
+    if (matches(evt, [ArrowDown, ArrowLeft])) {
+      delta = -step;
+    } else if (matches(evt, [ArrowUp, ArrowRight])) {
+      delta = step;
+    } else {
+      // Ignore keys we don't want to handle
+      return;
+    }
+
+    // If shift was held, account for the stepMultiplier
+    if (evt.shiftKey) {
+      delta *= stepMultiplier;
+    }
+    if (hasTwoHandles() && state.activeHandle) {
+      const currentValue = state.activeHandle === HandlePosition.LOWER ? state.value : state.valueUpper;
       const {
-        discreteValue,
-        discretePercent
-      } = this.calcDiscreteValueAndPercent({
-        leftPercent
+        value,
+        left
+      } = calcValue({
+        value: calcValueForDelta(currentValue ?? props.min, delta, props.step)
       });
-      return {
-        value: discreteValue,
-        left: discretePercent * 100
-      };
-    });
-    _defineProperty(this, "calcDistanceToHandle", (handle, clientX) => {
-      const handleBoundingRect = this.getHandleBoundingRect(handle);
-      // x co-ordinate of the midpoint.
-      const handleX = handleBoundingRect.left + handleBoundingRect.width / 2;
-      return Math.abs(handleX - clientX);
-    });
-    /**
-     * Calculates a new slider value based on the current value, a change delta,
-     * and a step.
-     *
-     * @param currentValue - The starting value from which the slider is moving.
-     * @param delta - The amount to adjust the current value by.
-     * @param step - The step. Defaults to `1`.
-     * @returns The new slider value, rounded to the same number of decimal places
-     *          as the step.
-     */
-    _defineProperty(this, "calcValueForDelta", (currentValue, delta, step = 1) => {
-      const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
-      const newValue = base + delta;
-      const decimals = (step.toString().split('.')[1] || '').length;
-      return Number(newValue.toFixed(decimals));
-    });
-    /**
-     * Sets state relevant to the given handle position.
-     *
-     * Guards against setting either lower or upper values beyond its counterpart.
-     */
-    _defineProperty(this, "setValueLeftForHandle", (handle, {
-      value: newValue,
-      left: newLeft
-    }) => {
+      setValueLeftForHandle(state.activeHandle, {
+        value: nearestStepValue(value),
+        left
+      });
+    } else {
       const {
         value,
-        valueUpper,
+        left
+      } = calcValue({
+        // Ensures custom value from `<input>` won't cause skipping next stepping
+        // point with right arrow key, e.g. Typing 51 in `<input>`, moving focus
+        // onto the thumb and the hitting right arrow key should yield 52 instead
+        // of 54.
+        value: calcValueForDelta(state.value, delta, props.step)
+      });
+      setState({
+        value: nearestStepValue(value),
         left,
-        leftUpper
-      } = this.state;
-      if (handle === HandlePosition.LOWER) {
-        // Don't allow higher than the upper handle.
-        this.setState({
-          value: valueUpper && newValue > valueUpper ? valueUpper : newValue,
-          left: valueUpper && newValue > valueUpper ? leftUpper : newLeft,
-          isValid: true
+        isValid: true
+      });
+    }
+    setState({
+      correctedValue: null,
+      correctedPosition: null
+    });
+  };
+
+  /**
+   * Provides the two-way binding for the input field of the Slider. It also
+   * Handles a change to the input field by recalculating the value/thumb and
+   * setting state accordingly.
+   */
+  const onChangeInput = evt => {
+    // Do nothing if component is disabled
+    if (props.disabled || props.readOnly) {
+      return;
+    }
+
+    // Do nothing if we have no valid event, target, or value
+    if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
+      return;
+    }
+
+    // Avoid calling calcValue for invalid numbers, but still update the state.
+    const activeHandle = evt.target.dataset.handlePosition ?? HandlePosition.LOWER;
+    const targetValue = Number.parseFloat(evt.target.value);
+    if (hasTwoHandles()) {
+      if (isNaN(targetValue)) {
+        setValueForHandle(activeHandle, evt.target.value);
+      } else if (isValidValueForPosition({
+        handle: activeHandle,
+        value: targetValue,
+        min: props.min,
+        max: props.max
+      })) {
+        processNewInputValue(evt.target);
+      } else {
+        setValueForHandle(activeHandle, targetValue);
+      }
+    } else {
+      if (isNaN(targetValue)) {
+        // TODO: Address this error
+        //
+        // @ts-expect-error - Passing a string to something that expects a
+        // number.
+        setState({
+          value: evt.target.value
         });
+      } else if (isValidValue({
+        value: targetValue,
+        min: props.min,
+        max: props.max
+      })) {
+        processNewInputValue(evt.target);
       } else {
-        this.setState({
-          valueUpper: value && newValue < value ? value : newValue,
-          leftUpper: value && newValue < value ? left : newLeft,
-          isValidUpper: true
+        setState({
+          value: targetValue
         });
       }
+    }
+  };
+
+  /**
+   * Checks for validity of input value after clicking out of the input. It also
+   * Handles state change to isValid state.
+   */
+  const onBlurInput = evt => {
+    // Do nothing if we have no valid event, target, or value
+    if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
+      return;
+    }
+    const {
+      value: targetValue
+    } = evt.target;
+    processNewInputValue(evt.target);
+    props.onBlur?.({
+      value: targetValue,
+      handlePosition: evt.target.dataset.handlePosition
     });
-    _defineProperty(this, "setValueForHandle", (handle, value) => {
-      if (handle === HandlePosition.LOWER) {
-        this.setState({
-          value,
-          isValid: true
+  };
+  const onInputKeyDown = evt => {
+    // Do nothing if component is disabled, or we don't have a valid event.
+    if (props.disabled || props.readOnly || !(evt.target instanceof HTMLInputElement)) {
+      return;
+    }
+
+    // Do nothing if we have no valid event, target, or value.
+    if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
+      return;
+    }
+    if (matches(evt, [Enter])) {
+      processNewInputValue(evt.target);
+    }
+  };
+  const processNewInputValue = input => {
+    setState({
+      correctedValue: null,
+      correctedPosition: null
+    });
+    const targetValue = Number.parseFloat(input.value);
+    const validity = !isNaN(targetValue);
+
+    // When there are two handles, we'll also have the data-handle-position
+    // attribute to consider the other value before settling on the validity to
+    // set.
+    const handlePosition = input.dataset.handlePosition;
+    if (handlePosition === HandlePosition.LOWER) {
+      setState({
+        isValid: validity
+      });
+    } else if (handlePosition === HandlePosition.UPPER) {
+      setState({
+        isValidUpper: validity
+      });
+    }
+    setState({
+      isValid: validity
+    });
+    if (validity) {
+      const adjustedValue = handlePosition ? getAdjustedValueForPosition({
+        handle: handlePosition,
+        value: targetValue,
+        min: props.min,
+        max: props.max
+      }) : getAdjustedValue({
+        value: targetValue,
+        min: props.min,
+        max: props.max
+      });
+      if (adjustedValue !== targetValue) {
+        setState({
+          correctedValue: targetValue.toString(),
+          correctedPosition: handlePosition ?? null
         });
       } else {
-        this.setState({
-          valueUpper: value,
-          isValidUpper: true
+        setState({
+          correctedValue: null,
+          correctedPosition: null
         });
       }
-    });
-    _defineProperty(this, "isValidValueForPosition", ({
-      handle,
-      value: newValue,
-      min,
-      max
-    }) => {
       const {
         value,
-        valueUpper
-      } = this.state;
-      if (!this.isValidValue({
-        value: newValue,
-        min,
-        max
-      })) {
-        return false;
-      }
-      if (handle === HandlePosition.LOWER) {
-        return !valueUpper || newValue <= valueUpper;
-      } else if (handle === HandlePosition.UPPER) {
-        return !value || newValue >= value;
+        left
+      } = calcValue({
+        value: adjustedValue,
+        useRawValue: true
+      });
+      if (handlePosition) {
+        setValueLeftForHandle(handlePosition, {
+          value: nearestStepValue(value),
+          left
+        });
+      } else {
+        setState({
+          value,
+          left
+        });
       }
-      return false;
-    });
-    _defineProperty(this, "isValidValue", ({
-      value,
-      min,
-      max
-    }) => {
-      return !(value < min || value > max);
-    });
-    _defineProperty(this, "getAdjustedValueForPosition", ({
-      handle,
-      value: newValue,
+    }
+  };
+  const calcLeftPercent = ({
+    clientX,
+    value,
+    range
+  }) => {
+    // TODO: Delete the optional chaining operator after `getBoundingClientRect`.
+    const boundingRect = elementRef.current?.getBoundingClientRect?.();
+    let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
+
+    // Enforce a minimum width of at least 1 for calculations
+    if (width <= 0) {
+      width = 1;
+    }
+
+    // If a clientX is specified, use it to calculate the leftPercent. If not,
+    // use the provided value to calculate it instead.
+    if (clientX) {
+      const leftOffset = state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
+      return leftOffset / width;
+    } else if (value !== null && typeof value !== 'undefined' && range) {
+      // Prevent NaN calculation if the range is 0.
+      return range === 0 ? 0 : (value - props.min) / range;
+    }
+    // We should never end up in this scenario, but in case we do, and to
+    // re-assure Typescript, return 0.
+    return 0;
+  };
+
+  /**
+   * Calculates the discrete value (snapped to the nearest step) along
+   * with the corresponding handle position percentage.
+   */
+  const calcDiscreteValueAndPercent = ({
+    leftPercent
+  }) => {
+    const {
+      step = 1,
       min,
       max
-    }) => {
-      const {
-        value,
-        valueUpper
-      } = this.state;
-      newValue = this.getAdjustedValue({
-        value: newValue,
-        min,
-        max
-      });
+    } = props;
+    const numSteps = Math.floor((max - min) / step) + ((max - min) % step === 0 ? 1 : 2);
+    /** Index of the step that corresponds to `leftPercent`. */
+    const stepIndex = Math.round(leftPercent * (numSteps - 1));
+    const discreteValue = stepIndex === numSteps - 1 ? max : min + step * stepIndex;
+    /** Percentage corresponding to the step index. */
+    const discretePercent = stepIndex / (numSteps - 1);
+    return {
+      discreteValue,
+      discretePercent
+    };
+  };
 
-      // Next adjust to the opposite handle.
-      if (handle === HandlePosition.LOWER && valueUpper) {
-        newValue = newValue > valueUpper ? valueUpper : newValue;
-      } else if (handle === HandlePosition.UPPER && value) {
-        newValue = newValue < value ? value : newValue;
-      }
-      return newValue;
-    });
-    _defineProperty(this, "getAdjustedValue", ({
+  /**
+   * Calculates the slider's value and handle position based on either a
+   * mouse/touch event or an explicit value.
+   */
+  const calcValue = ({
+    clientX,
+    value,
+    useRawValue
+  }) => {
+    const range = props.max - props.min;
+    const leftPercentRaw = calcLeftPercent({
+      clientX,
       value,
-      min,
-      max
-    }) => {
-      if (value < min) {
-        value = min;
-      }
-      if (value > max) {
-        value = max;
-      }
-      return value;
+      range
     });
-    /**
-     * Get the bounding rect for the requested handles' DOM element.
-     *
-     * If the bounding rect is not available, a new, empty DOMRect is returned.
-     */
-    _defineProperty(this, "getHandleBoundingRect", handle => {
-      let boundingRect;
-      if (handle === HandlePosition.LOWER) {
-        boundingRect = this.thumbRef.current?.getBoundingClientRect();
-      } else {
-        boundingRect = this.thumbRefUpper.current?.getBoundingClientRect();
-      }
-      return boundingRect ?? new DOMRect();
+    /** `leftPercentRaw` clamped between 0 and 1. */
+    const leftPercent = clamp(leftPercentRaw, 0, 1);
+    if (useRawValue) {
+      return {
+        value,
+        left: leftPercent * 100
+      };
+    }
+
+    // Use the discrete value and percentage for snapping.
+    const {
+      discreteValue,
+      discretePercent
+    } = calcDiscreteValueAndPercent({
+      leftPercent
     });
-    this.thumbRef = /*#__PURE__*/createRef();
-    this.thumbRefUpper = /*#__PURE__*/createRef();
-    this.filledTrackRef = /*#__PURE__*/createRef();
-  }
+    return {
+      value: discreteValue,
+      left: discretePercent * 100
+    };
+  };
+  const calcDistanceToHandle = (handle, clientX) => {
+    const handleBoundingRect = getHandleBoundingRect(handle);
+    /** x-coordinate of the midpoint. */
+    const handleX = handleBoundingRect.left + handleBoundingRect.width / 2;
+    return Math.abs(handleX - clientX);
+  };
 
   /**
-   * Sets up initial slider position and value in response to component mount.
+   * Calculates a new slider value based on the current value, a change delta,
+   * and a step.
+   *
+   * @param currentValue - The starting value from which the slider is moving.
+   * @param delta - The amount to adjust the current value by.
+   * @param step - The step. Defaults to `1`.
+   * @returns The new slider value, rounded to the same number of decimal places
+   *          as the step.
    */
-  componentDidMount() {
-    if (this.element) {
-      const isRtl = document?.dir === 'rtl';
-      if (this.hasTwoHandles()) {
-        const {
-          value,
-          left
-        } = this.calcValue({
-          value: this.state.value,
-          useRawValue: true
-        });
-        const {
-          value: valueUpper,
-          left: leftUpper
-        } = this.calcValue({
-          value: this.state.valueUpper,
-          useRawValue: true
-        });
-        this.setState({
-          isRtl,
-          value,
-          left,
-          valueUpper,
-          leftUpper
-        });
-        if (this.filledTrackRef.current) {
-          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
-        }
-      } else {
-        const {
-          value,
-          left
-        } = this.calcValue({
-          value: this.state.value,
-          useRawValue: true
-        });
-        this.setState({
-          isRtl,
-          value,
-          left
-        });
-        if (this.filledTrackRef.current) {
-          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
-        }
-      }
-    }
-  }
+  const calcValueForDelta = (currentValue, delta, step = 1) => {
+    const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
+    const newValue = base + delta;
+    // TODO: Why is the logical OR needed here?
+    const decimals = (step.toString().split('.')[1] || '').length;
+    return Number(newValue.toFixed(decimals));
+  };
 
   /**
-   * Handles firing of `onChange` and `onRelease` callbacks to parent in
-   * response to state changes.
+   * Sets state relevant to the given handle position.
    *
-   * @param {*} prevProps prevProps
-   * @param {*} prevState The previous Slider state, used to see if callbacks
-   * should be called.
+   * Guards against setting either lower or upper values beyond its counterpart.
    */
-  componentDidUpdate(prevProps, prevState) {
-    // Fire onChange event handler if present, if there's a usable value, and
-    // if the value is different from the last one
-    if (this.hasTwoHandles()) {
-      if (this.filledTrackRef.current) {
-        this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
-      }
+  const setValueLeftForHandle = (handle, {
+    value: newValue,
+    left: newLeft
+  }) => {
+    const {
+      value,
+      valueUpper,
+      left,
+      leftUpper
+    } = state;
+    if (handle === HandlePosition.LOWER) {
+      // Don't allow higher than the upper handle.
+      setState({
+        value: valueUpper && newValue > valueUpper ? valueUpper : newValue,
+        left: valueUpper && newValue > valueUpper ? leftUpper : newLeft,
+        isValid: true
+      });
     } else {
-      if (this.filledTrackRef.current) {
-        this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
-      }
-    }
-    if ((prevState.value !== this.state.value || prevState.valueUpper !== this.state.valueUpper) && typeof this.props.onChange === 'function') {
-      this.props.onChange({
-        value: this.state.value,
-        valueUpper: this.state.valueUpper
+      setState({
+        valueUpper: value && newValue < value ? value : newValue,
+        leftUpper: value && newValue < value ? left : newLeft,
+        isValidUpper: true
       });
     }
-
-    // Fire onRelease event handler if present and if needed
-    if (this.state.needsOnRelease && typeof this.props.onRelease === 'function') {
-      this.props.onRelease({
-        value: this.state.value,
-        valueUpper: this.state.valueUpper
+  };
+  const setValueForHandle = (handle, value) => {
+    if (handle === HandlePosition.LOWER) {
+      setState({
+        // TODO: Address this error
+        //
+        // @ts-expect-error - Passing a string to something that expects a
+        // number.
+        value,
+        isValid: true
       });
-      // Reset the flag
-      this.setState({
-        needsOnRelease: false
+    } else {
+      setState({
+        // TODO: Address this error
+        //
+        // @ts-expect-error - Passing a string to something that expects a
+        // number.
+        valueUpper: value,
+        isValidUpper: true
       });
     }
+  };
+  const isValidValueForPosition = ({
+    handle,
+    value: newValue,
+    min,
+    max
+  }) => {
+    const {
+      value,
+      valueUpper
+    } = state;
+    if (!isValidValue({
+      value: newValue,
+      min,
+      max
+    })) {
+      return false;
+    }
+    if (handle === HandlePosition.LOWER) {
+      return !valueUpper || newValue <= valueUpper;
+    } else if (handle === HandlePosition.UPPER) {
+      return !value || newValue >= value;
+    }
+    return false;
+  };
+  const isValidValue = ({
+    value,
+    min,
+    max
+  }) => {
+    return !(value < min || value > max);
+  };
+  const getAdjustedValueForPosition = ({
+    handle,
+    value: newValueInput,
+    min,
+    max
+  }) => {
+    const {
+      value,
+      valueUpper
+    } = state;
+    let newValue = getAdjustedValue({
+      value: newValueInput,
+      min,
+      max
+    });
 
-    // If value from props does not change, do nothing here.
-    // Otherwise, do prop -> state sync without "value capping".
-    if (prevProps.value === this.props.value && prevProps.unstable_valueUpper === this.props.unstable_valueUpper && prevProps.max === this.props.max && prevProps.min === this.props.min) {
-      return;
+    // TODO: Just return the value.
+    // Next adjust to the opposite handle.
+    if (handle === HandlePosition.LOWER && valueUpper) {
+      newValue = newValue > valueUpper ? valueUpper : newValue;
+    } else if (handle === HandlePosition.UPPER && value) {
+      newValue = newValue < value ? value : newValue;
     }
-    this.setState(this.calcValue({
-      value: this.props.value,
-      useRawValue: true
-    }));
-    if (typeof this.props.unstable_valueUpper !== 'undefined') {
-      const {
-        value: valueUpper,
-        left: leftUpper
-      } = this.calcValue({
-        value: this.props.unstable_valueUpper,
-        useRawValue: true
-      });
-      this.setState({
-        valueUpper,
-        leftUpper
-      });
-    } else {
-      this.setState({
-        valueUpper: undefined,
-        leftUpper: undefined
-      });
+    return newValue;
+  };
+  const getAdjustedValue = ({
+    value,
+    min,
+    max
+  }) => {
+    // TODO: Just return the value.
+    if (value < min) {
+      value = min;
     }
-  }
+    if (value > max) {
+      value = max;
+    }
+    return value;
+  };
 
   /**
-   * Rounds a given value to the nearest step defined by the slider's `step`
-   * prop.
+   * Get the bounding rect for the requested handles' DOM element.
    *
-   * @param value - The value to adjust to the nearest step. Defaults to `0`.
-   * @returns The value rounded to the precision determined by the step.
+   * If the bounding rect is not available, a new, empty DOMRect is returned.
    */
-  nearestStepValue(value = 0) {
-    const decimals = (this.props.step?.toString().split('.')[1] || '').length;
-    return Number(value.toFixed(decimals));
-  }
-  getClientXFromEvent(event) {
+  const getHandleBoundingRect = handle => {
+    let boundingRect;
+    if (handle === HandlePosition.LOWER) {
+      boundingRect = thumbRef.current?.getBoundingClientRect();
+    } else {
+      boundingRect = thumbRefUpper.current?.getBoundingClientRect();
+    }
+    return boundingRect ?? new DOMRect();
+  };
+  const getClientXFromEvent = event => {
     let clientX;
     if ('clientX' in event) {
       clientX = event.clientX;
@@ -829,17 +910,12 @@ class Slider extends PureComponent {
       clientX = event.touches[0].clientX;
     }
     return clientX;
-  }
-  hasTwoHandles() {
-    return typeof this.state.valueUpper !== 'undefined';
-  }
-
-  // syncs invalid state and prop
-  static getDerivedStateFromProps(props, state) {
+  };
+  useEffect(() => {
     const {
       isValid,
       isValidUpper
-    } = state;
+    } = stateRef.current;
     const derivedState = {};
 
     // Will override state in favor of invalid prop
@@ -850,16 +926,20 @@ class Slider extends PureComponent {
       if (isValid === false) derivedState.isValid = true;
       if (isValidUpper === false) derivedState.isValidUpper = true;
     }
-    return Object.keys(derivedState).length ? derivedState : null;
-  }
-  render() {
-    var _Fragment, _Fragment2, _Fragment3, _Fragment4;
+    if (Object.keys(derivedState).length) {
+      setState(derivedState);
+    }
+  }, [props.invalid]);
+
+  // TODO: Delete this IIFE. It was added to maintain whitespace and to make it clear
+  // what exactly has changed.
+  return ((_Fragment, _Fragment2, _Fragment3, _Fragment4) => {
     const {
       ariaLabelInput,
       unstable_ariaLabelInputUpper: ariaLabelInputUpper,
       className,
       hideTextInput = false,
-      id = this.inputId = this.inputId ||
+      id = inputIdRef.current = inputIdRef.current ||
       // TODO:
       // 1. Why isn't `inputId` just set to this value instead of an empty
       //    string?
@@ -889,8 +969,7 @@ class Slider extends PureComponent {
       warnText,
       translateWithId: t = translateWithId,
       ...other
-    } = this.props;
-    const twoHandles = this.hasTwoHandles();
+    } = props;
     delete other.onRelease;
     delete other.invalid;
     delete other.unstable_valueUpper;
@@ -902,7 +981,7 @@ class Slider extends PureComponent {
       correctedValue,
       correctedPosition,
       isRtl
-    } = this.state;
+    } = state;
     const showWarning = !readOnly && warn ||
     // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
     // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
@@ -961,12 +1040,12 @@ class Slider extends PureComponent {
       }]);
       const lowerThumbWrapperProps = {
         style: {
-          insetInlineStart: `${this.state.left}%`
+          insetInlineStart: `${state.left}%`
         }
       };
       const upperThumbWrapperProps = {
         style: {
-          insetInlineStart: `${this.state.leftUpper}%`
+          insetInlineStart: `${state.leftUpper}%`
         }
       };
       return /*#__PURE__*/React.createElement("div", {
@@ -992,10 +1071,10 @@ class Slider extends PureComponent {
         min: min,
         max: max,
         step: step,
-        onChange: this.onChange,
-        onBlur: this.onBlur,
-        onKeyUp: this.props.onInputKeyUp,
-        onKeyDown: this.onInputKeyDown,
+        onChange: onChangeInput,
+        onBlur: onBlurInput,
+        onKeyUp: props.onInputKeyUp,
+        onKeyDown: onInputKeyDown,
         "data-invalid": !isValid && !readOnly ? true : null,
         "data-handle-position": HandlePosition.LOWER,
         "aria-invalid": !isValid && !readOnly ? true : undefined,
@@ -1009,11 +1088,11 @@ class Slider extends PureComponent {
       }, formatLabel(min, minLabel)), /*#__PURE__*/React.createElement("div", _extends({
         className: sliderClasses,
         ref: node => {
-          this.element = node;
+          elementRef.current = node;
         },
-        onMouseDown: this.onDragStart,
-        onTouchStart: this.onDragStart,
-        onKeyDown: this.onKeyDown,
+        onMouseDown: onDragStart,
+        onTouchStart: onDragStart,
+        onKeyDown: onKeyDown,
         role: "presentation",
         tabIndex: -1,
         "data-invalid": (twoHandles ? !isValid || !isValidUpper : !isValid) && !readOnly ? true : null
@@ -1033,8 +1112,8 @@ class Slider extends PureComponent {
         "aria-valuenow": value,
         "aria-labelledby": twoHandles ? undefined : labelId,
         "aria-label": twoHandles ? ariaLabelInput : undefined,
-        ref: this.thumbRef,
-        onFocus: () => this.setState({
+        ref: thumbRef,
+        onFocus: () => setState({
           activeHandle: HandlePosition.LOWER
         })
       }, twoHandles && !isRtl ? _Fragment || (_Fragment = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LowerHandle, {
@@ -1058,8 +1137,8 @@ class Slider extends PureComponent {
         "aria-valuemin": value,
         "aria-valuenow": valueUpper,
         "aria-label": ariaLabelInputUpper,
-        ref: this.thumbRefUpper,
-        onFocus: () => this.setState({
+        ref: thumbRefUpper,
+        onFocus: () => setState({
           activeHandle: HandlePosition.UPPER
         })
       }, twoHandles && !isRtl ? _Fragment3 || (_Fragment3 = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UpperHandle, {
@@ -1073,11 +1152,11 @@ class Slider extends PureComponent {
       }))) : undefined)) : null, /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--slider__track`,
         ref: node => {
-          this.track = node;
+          trackRef.current = node;
         }
       }), /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--slider__filled-track`,
-        ref: this.filledTrackRef
+        ref: filledTrackRef
       })), /*#__PURE__*/React.createElement(Text, {
         className: `${prefix}--slider__range-label`
       }, formatLabel(max, maxLabel)), /*#__PURE__*/React.createElement("div", {
@@ -1095,10 +1174,10 @@ class Slider extends PureComponent {
         min: min,
         max: max,
         step: step,
-        onChange: this.onChange,
-        onBlur: this.onBlur,
-        onKeyDown: this.onInputKeyDown,
-        onKeyUp: this.props.onInputKeyUp,
+        onChange: onChangeInput,
+        onBlur: onBlurInput,
+        onKeyDown: onInputKeyDown,
+        onKeyUp: props.onInputKeyUp,
         "data-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : null,
         "data-handle-position": twoHandles ? HandlePosition.UPPER : null,
         "aria-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : undefined,
@@ -1121,10 +1200,8 @@ class Slider extends PureComponent {
         correctedValue
       })));
     });
-  }
-}
-_defineProperty(Slider, "contextType", FeatureFlagContext);
-_defineProperty(Slider, "translationIds", Object.values(translationIds));
+  })();
+};
 Slider.propTypes = {
   /**
    * The `ariaLabel` for the `<input>`.
@@ -1265,4 +1342,4 @@ Slider.propTypes = {
   warnText: PropTypes.node
 };
 
-export { Slider as default };
+export { Slider };