@carbon/react 1.40.0 → 1.41.0-rc.0

package/es/components/Slider/Slider.js

@@ -10,13 +10,80 @@ import React__default, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import throttle from 'lodash.throttle';
-import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
+import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.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 { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 
+var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
+const LowerHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
+}, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+})), _path2 || (_path2 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+}))));
+const LowerHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
+}, _path3 || (_path3 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
+})), _path4 || (_path4 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+})), _path5 || (_path5 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M15.08 0H16v6.46h-.92z"
+})), _path6 || (_path6 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 0h.92v24H0zM15.08 0H16v24h-.92z"
+})), _path7 || (_path7 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
+}))));
+const UpperHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
+}, _path8 || (_path8 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+})), _path9 || (_path9 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+}))));
+const UpperHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 24",
+  className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
+}, _path10 || (_path10 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
+})), _path11 || (_path11 = /*#__PURE__*/React__default.createElement("path", {
+  fill: "none",
+  d: "M-4 0h24v24H-4z"
+})), _path12 || (_path12 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M.92 24H0v-6.46h.92z"
+})), _path13 || (_path13 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
+})), _path14 || (_path14 = /*#__PURE__*/React__default.createElement("path", {
+  d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
+}))));
+const translationIds = {
+  autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
+};
+function translateWithId(translationId, translationState) {
+  if (translationId === translationIds.autoCorrectAnnouncement && translationState?.correctedValue) {
+    const {
+      correctedValue
+    } = translationState;
+    return `The inputted value "${correctedValue}" was corrected to the nearest allowed digit.`;
+  }
+  return '';
+}
 const defaultFormatLabel = (value, label) => {
   return typeof label === 'function' ? label(value) : `${value}${label}`;
 };
@@ -35,17 +102,35 @@ const DRAG_EVENT_TYPES = new Set(['mousemove', 'touchmove']);
  * Event types that trigger a "drag" to stop.
  */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
+
+/**
+ * Distinguish two handles by lower and upper positions.
+ */
+var HandlePosition = /*#__PURE__*/function (HandlePosition) {
+  HandlePosition["LOWER"] = "lower";
+  HandlePosition["UPPER"] = "upper";
+  return HandlePosition;
+}(HandlePosition || {});
 class Slider extends PureComponent {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     _defineProperty(this, "state", {
       value: this.props.value,
+      valueUpper: this.props.unstable_valueUpper,
       left: 0,
+      leftUpper: 0,
       needsOnRelease: false,
       isValid: true,
+      isValidUpper: true,
+      activeHandle: null,
+      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", '');
@@ -72,10 +157,24 @@ class Slider extends PureComponent {
       DRAG_EVENT_TYPES.forEach(element => {
         this.element?.ownerDocument.addEventListener(element, this.onDrag);
       });
+      const clientX = this.getClientXFromEvent(evt);
+      let activeHandle;
+      if (this.hasTwoHandles()) {
+        const distanceToLower = this.calcDistanceToHandle(HandlePosition.LOWER, clientX);
+        const distanceToUpper = this.calcDistanceToHandle(HandlePosition.UPPER, clientX);
+        if (distanceToLower <= distanceToUpper) {
+          activeHandle = HandlePosition.LOWER;
+        } else {
+          activeHandle = HandlePosition.UPPER;
+        }
+      }
+      this.setState({
+        activeHandle
+      });
 
       // Perform first recalculation since we probably didn't click exactly in the
-      // middle of the thumb
-      this.onDrag(evt);
+      // middle of the thumb.
+      this.onDrag(evt, activeHandle);
     });
     /**
      * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
@@ -97,10 +196,11 @@ class Slider extends PureComponent {
         this.element?.ownerDocument.removeEventListener(element, this.onDrag);
       });
 
-      // Set needsOnRelease flag so event fires on next update
+      // Set needsOnRelease flag so event fires on next update.
       this.setState({
         needsOnRelease: true,
-        isValid: true
+        isValid: true,
+        isValidUpper: true
       });
     });
     /**
@@ -108,31 +208,42 @@ class Slider extends PureComponent {
      * accordingly.
      *
      * @param {Event} 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 => {
-      // Do nothing if component is disabled or we have no event
-      if (this.props.disabled || this.props.readOnly || !evt) {
-        return;
-      }
-      let clientX;
-      if ('clientX' in evt) {
-        clientX = evt.clientX;
-      } else if ('touches' in evt && 0 in evt.touches && 'clientX' in evt.touches[0]) {
-        clientX = evt.touches[0].clientX;
-      } else {
-        // Do nothing if we have no valid clientX
+    _defineProperty(this, "_onDrag", function (evt) {
+      let activeHandle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      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
+      } = _this.calcValue({
+        clientX,
+        value: _this.state.value
       });
-      this.setState({
-        value: this.nearestStepValue(value),
-        left,
-        isValid: true
+      // 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),
+          left
+        });
+      } else {
+        _this.setState({
+          value: _this.nearestStepValue(value),
+          left,
+          isValid: true
+        });
+      }
+      _this.setState({
+        correctedValue: null,
+        correctedPosition: null
       });
     });
     /**
@@ -150,15 +261,19 @@ class Slider extends PureComponent {
      * @param {Event} evt The event.
      */
     _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 || !('which' in 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.which, [ArrowDown, ArrowLeft])) {
-        delta = -(this.props.step ?? Slider.defaultProps.step);
-      } else if (matches(evt.which, [ArrowUp, ArrowRight])) {
-        delta = this.props.step ?? Slider.defaultProps.step;
+      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;
@@ -166,22 +281,40 @@ class Slider extends PureComponent {
 
       // If shift was held, account for the stepMultiplier
       if (evt.shiftKey) {
-        const stepMultiplier = this.props.stepMultiplier;
-        delta *= stepMultiplier ?? Slider.defaultProps.stepMultiplier;
+        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, delta, this.props.step)
+        });
+        this.setValueLeftForHandle(this.state.activeHandle, {
+          value: this.nearestStepValue(value),
+          left
+        });
+      } else {
+        const {
+          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
+        });
       }
-      Math.floor(this.state.value / (this.props.step ?? Slider.defaultProps.step)) * (this.props.step ?? Slider.defaultProps.step);
-      const {
-        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: (delta > 0 ? Math.floor(this.state.value / (this.props.step ?? Slider.defaultProps.step)) * (this.props.step ?? Slider.defaultProps.step) : this.state.value) + delta
-      });
       this.setState({
-        value: this.nearestStepValue(value),
-        left,
-        isValid: true
+        correctedValue: null,
+        correctedPosition: null
       });
     });
     /**
@@ -201,25 +334,39 @@ class Slider extends PureComponent {
       if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
         return;
       }
-      const targetValue = Number.parseFloat(evt.target.value);
 
-      // Avoid calling calcValue for invalid numbers, but still update the state
-      if (isNaN(targetValue)) {
-        this.setState({
-          value: evt.target.value
-        });
+      // 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 {
-        const {
-          value,
-          left
-        } = this.calcValue({
+        if (isNaN(targetValue)) {
+          this.setState({
+            value: evt.target.value
+          });
+        } else if (this.isValidValue({
           value: targetValue,
-          useRawValue: true
-        });
-        this.setState({
-          value,
-          left
-        });
+          min: this.props.min,
+          max: this.props.max
+        })) {
+          this.processNewInputValue(evt.target);
+        } else {
+          this.setState({
+            value: targetValue
+          });
+        }
       }
     });
     /**
@@ -233,18 +380,131 @@ class Slider extends PureComponent {
       if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
         return;
       }
-
-      // determine validity of input change after clicking out of input
-      const validity = evt.target.checkValidity();
       const {
-        value
+        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) {
+        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])) {
+        this.processNewInputValue(evt.target);
+      }
+    });
+    _defineProperty(this, "processNewInputValue", input => {
+      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
       });
-      this.props.onBlur?.({
-        value
-      });
+      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,
+            correctedPosition: handlePosition
+          });
+        } else {
+          this.setState({
+            correctedValue: null,
+            correctedPosition: null
+          });
+        }
+        const {
+          value,
+          left
+        } = this.calcValue({
+          value: adjustedValue,
+          useRawValue: true
+        });
+        if (handlePosition) {
+          this.setValueLeftForHandle(handlePosition, {
+            value,
+            left
+          });
+        } else {
+          this.setState({
+            value,
+            left
+          });
+        }
+      }
+    });
+    _defineProperty(this, "calcLeftPercent", _ref => {
+      let {
+        clientX,
+        value,
+        range
+      } = _ref;
+      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;
+      }
+
+      // 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 && range) {
+        // Prevent NaN calculation if the range is 0.
+        return range === 0 ? 0 : (value - this.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;
+    });
+    _defineProperty(this, "calcSteppedValuePercent", _ref2 => {
+      let {
+        leftPercent,
+        range
+      } = _ref2;
+      const {
+        step = 1
+      } = this.props;
+      const totalSteps = range / step;
+      let steppedValue = Math.round(leftPercent * totalSteps) * step;
+      const steppedPercent = this.clamp(steppedValue / range, 0, 1);
+      steppedValue = this.clamp(steppedValue + this.props.min, this.props.min, this.props.max);
+      return [steppedValue, steppedPercent];
     });
     /**
      * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
@@ -265,35 +525,20 @@ class Slider extends PureComponent {
      *   clientX is not provided.
      * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
      */
-    _defineProperty(this, "calcValue", _ref => {
+    _defineProperty(this, "calcValue", _ref3 => {
       let {
         clientX,
         value,
         useRawValue = false
-      } = _ref;
+      } = _ref3;
       const range = this.props.max - this.props.min;
-      const boundingRect = this.element?.getBoundingClientRect?.();
-      const totalSteps = range / (this.props.step ?? Slider.defaultProps.step);
-      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 or state's value to calculate it instead.
-      let leftPercent;
-      if (clientX != null) {
-        const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
-        leftPercent = leftOffset / width;
-      } else {
-        if (value == null) {
-          value = this.state.value;
-        }
-        // prevent NaN calculation if the range is 0
-        leftPercent = range === 0 ? 0 : (value - this.props.min) / range;
-      }
+      // @todo solve for rtl.
+      const leftPercent = this.calcLeftPercent({
+        clientX,
+        value,
+        range
+      });
       if (useRawValue) {
         // Adjusts only for min/max of thumb position
         return {
@@ -301,15 +546,168 @@ class Slider extends PureComponent {
           left: Math.min(1, Math.max(0, leftPercent)) * 100
         };
       }
-      let steppedValue = Math.round(leftPercent * totalSteps) * (this.props.step ?? Slider.defaultProps.step);
-      const steppedPercent = this.clamp(steppedValue / range, 0, 1);
-      steppedValue = this.clamp(steppedValue + this.props.min, this.props.min, this.props.max);
+      const [steppedValue, steppedPercent] = this.calcSteppedValuePercent({
+        leftPercent,
+        range
+      });
       return {
         value: steppedValue,
         left: steppedPercent * 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);
+    });
+    /**
+     * Given the current value, delta and step, calculate the new value.
+     *
+     * @param {number} currentValue
+     *   Current value user is moving from.
+     * @param {number} delta
+     *   Movement from the current value. Can be positive or negative.
+     * @param {number} step
+     *   A value determining how much the value should increase/decrease by moving
+     *   the thumb by mouse.
+     */
+    _defineProperty(this, "calcValueForDelta", function (currentValue, delta) {
+      let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      return (delta > 0 ? Math.floor(currentValue / step) * step : currentValue) + delta;
+    });
+    /**
+     * Sets state relevant to the given handle position.
+     *
+     * Guards against setting either lower or upper values beyond its counterpart.
+     */
+    _defineProperty(this, "setValueLeftForHandle", (handle, _ref4) => {
+      let {
+        value: newValue,
+        left: newLeft
+      } = _ref4;
+      const {
+        value,
+        valueUpper,
+        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
+        });
+      } else {
+        this.setState({
+          valueUpper: value && newValue < value ? value : newValue,
+          leftUpper: value && newValue < value ? left : newLeft,
+          isValidUpper: true
+        });
+      }
+    });
+    _defineProperty(this, "setValueForHandle", (handle, value) => {
+      if (handle === HandlePosition.LOWER) {
+        this.setState({
+          value,
+          isValid: true
+        });
+      } else {
+        this.setState({
+          valueUpper: value,
+          isValidUpper: true
+        });
+      }
+    });
+    _defineProperty(this, "isValidValueForPosition", _ref5 => {
+      let {
+        handle,
+        value: newValue,
+        min,
+        max
+      } = _ref5;
+      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;
+      }
+      return false;
+    });
+    _defineProperty(this, "isValidValue", _ref6 => {
+      let {
+        value,
+        min,
+        max
+      } = _ref6;
+      return !(value < min || value > max);
+    });
+    _defineProperty(this, "getAdjustedValueForPosition", _ref7 => {
+      let {
+        handle,
+        value: newValue,
+        min,
+        max
+      } = _ref7;
+      const {
+        value,
+        valueUpper
+      } = this.state;
+      newValue = this.getAdjustedValue({
+        value: newValue,
+        min,
+        max
+      });
+
+      // 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", _ref8 => {
+      let {
+        value,
+        min,
+        max
+      } = _ref8;
+      if (value < min) {
+        value = min;
+      }
+      if (value > max) {
+        value = max;
+      }
+      return value;
+    });
+    /**
+     * 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();
+    });
     this.thumbRef = /*#__PURE__*/React__default.createRef();
+    this.thumbRefUpper = /*#__PURE__*/React__default.createRef();
     this.filledTrackRef = /*#__PURE__*/React__default.createRef();
   }
 
@@ -318,17 +716,43 @@ class Slider extends PureComponent {
    */
   componentDidMount() {
     if (this.element) {
-      const {
-        value,
-        left
-      } = this.calcValue({
-        useRawValue: true
-      });
-      this.setState({
-        value,
-        left,
-        isRtl: document?.dir === 'rtl'
-      });
+      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
+        });
+      } else {
+        const {
+          value,
+          left
+        } = this.calcValue({
+          value: this.state.value,
+          useRawValue: true
+        });
+        this.setState({
+          isRtl,
+          value,
+          left
+        });
+      }
     }
   }
 
@@ -343,32 +767,39 @@ class Slider extends PureComponent {
   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
-
-    // Set alternative positioning if direction is 'rtl'
-    if (this.thumbRef.current) {
-      if (this.state.isRtl) {
-        this.thumbRef.current.style.insetInlineStart = `calc(${this.state.left}% - 14px)`;
-      } else {
+    if (this.hasTwoHandles()) {
+      if (this.thumbRef.current) {
         this.thumbRef.current.style.insetInlineStart = `${this.state.left}%`;
+        if (this.state.isRtl) {
+          this.thumbRef.current.style.transform = `translate(100%, -50%)`;
+        }
       }
-    }
-    if (this.filledTrackRef.current) {
-      if (this.state.isRtl) {
-        this.filledTrackRef.current.style.transform = `translate(100%, -50%) scaleX(-${this.state.left / 100})`;
-      } else {
-        this.filledTrackRef.current.style.transform = `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+      if (this.thumbRefUpper.current) {
+        this.thumbRefUpper.current.style.insetInlineStart = `${this.state.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 {
+      if (this.thumbRef.current) {
+        this.thumbRef.current.style.insetInlineStart = this.state.isRtl ? `calc(${this.state.left}% - 14px)` : `${this.state.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})`;
       }
     }
-    if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
+    if ((prevState.value !== this.state.value || prevState.valueUpper !== this.state.valueUpper) && typeof this.props.onChange === 'function') {
       this.props.onChange({
-        value: this.state.value
+        value: this.state.value,
+        valueUpper: this.state.valueUpper
       });
     }
 
     // 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
+        value: this.state.value,
+        valueUpper: this.state.valueUpper
       });
       // Reset the flag
       this.setState({
@@ -378,13 +809,31 @@ class Slider extends PureComponent {
 
     // 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.max === this.props.max && prevProps.min === this.props.min) {
+    if (prevProps.value === this.props.value && prevProps.unstable_valueUpper === this.props.unstable_valueUpper && prevProps.max === this.props.max && prevProps.min === this.props.min) {
       return;
     }
     this.setState(this.calcValue({
       value: this.props.value,
       useRawValue: true
     }));
+    if (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
+      });
+    }
   }
 
   /**
@@ -414,81 +863,187 @@ class Slider extends PureComponent {
     tempInput.value = `${value}`;
     return parseFloat(tempInput.value);
   }
+  getClientXFromEvent(event) {
+    let clientX;
+    if ('clientX' in event) {
+      clientX = event.clientX;
+    } else if ('touches' in event && 0 in event.touches && 'clientX' in event.touches[0]) {
+      clientX = event.touches[0].clientX;
+    }
+    return clientX;
+  }
+  hasTwoHandles() {
+    return this.state.valueUpper !== undefined;
+  }
+
   // syncs invalid state and prop
   static getDerivedStateFromProps(props, state) {
     const {
-      isValid
+      isValid,
+      isValidUpper
     } = state;
-    // will override state in favor of invalid prop
-    if (props.invalid === true && isValid === true) {
-      return {
-        isValid: false
-      };
-    }
-    if (props.invalid === false && isValid === false) {
-      return {
-        isValid: true
-      };
+    let derivedState = {};
+
+    // Will override state in favor of invalid prop
+    if (props.invalid === true) {
+      if (isValid === true) {
+        derivedState = {
+          ...derivedState,
+          isValid: false
+        };
+      }
+      if (isValid === true) {
+        derivedState = {
+          ...derivedState,
+          isValid: false
+        };
+      }
+      if (isValidUpper === true) {
+        derivedState = {
+          ...derivedState,
+          isValidUpper: false
+        };
+      }
+    } else if (props.invalid === false) {
+      if (isValid === false) {
+        derivedState = {
+          ...derivedState,
+          isValid: true
+        };
+      }
+      if (isValid === false) {
+        derivedState = {
+          ...derivedState,
+          isValid: true
+        };
+      }
+      if (isValidUpper === false) {
+        derivedState = {
+          ...derivedState,
+          isValidUpper: true
+        };
+      }
     }
-    //if invalid prop is not provided, state will remain the same
-    return null;
+    return Object.entries(derivedState).length > 0 ? derivedState : null;
   }
   render() {
     const {
       ariaLabelInput,
+      unstable_ariaLabelInputUpper: ariaLabelInputUpper,
       className,
-      hideTextInput,
+      hideTextInput = false,
       id = this.inputId = this.inputId || `__carbon-slider_${Math.random().toString(36).substr(2)}`,
       min,
-      minLabel,
+      minLabel = '',
       max,
-      maxLabel,
+      maxLabel = '',
       formatLabel = defaultFormatLabel,
       labelText,
-      step,
+      step = 1,
       stepMultiplier: _stepMultiplier,
-      inputType,
+      inputType = 'number',
       invalidText,
       required,
-      disabled,
+      disabled = false,
       name,
+      unstable_nameUpper: nameUpper,
       light,
-      readOnly,
+      readOnly = false,
       warn,
       warnText,
+      translateWithId: t = translateWithId,
       ...other
     } = this.props;
+    const twoHandles = this.hasTwoHandles();
     delete other.onRelease;
     delete other.invalid;
+    delete other.unstable_valueUpper;
     const {
       value,
-      isValid
+      valueUpper,
+      isValid,
+      isValidUpper,
+      correctedValue,
+      correctedPosition,
+      isRtl
     } = this.state;
+    const showWarning = !readOnly && warn && isValid || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER;
+    const showWarningUpper = !readOnly && warn && (twoHandles ? isValidUpper : isValid) || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER);
     return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {
         [`${prefix}--label--disabled`]: disabled
       });
+      const containerClasses = cx(`${prefix}--slider-container`, {
+        [`${prefix}--slider-container--two-handles`]: twoHandles,
+        [`${prefix}--slider-container--disabled`]: disabled,
+        [`${prefix}--slider-container--readonly`]: readOnly
+      });
       const sliderClasses = cx(`${prefix}--slider`, {
-        [`${prefix}--slider--disabled`]: disabled
-      }, {
+        [`${prefix}--slider--disabled`]: disabled,
         [`${prefix}--slider--readonly`]: readOnly
       });
-      const inputClasses = cx(`${prefix}--text-input`, `${prefix}--slider-text-input`, {
+      const fixedInputClasses = [`${prefix}--text-input`, `${prefix}--slider-text-input`];
+      const conditionalInputClasses = {
         [`${prefix}--text-input--light`]: light,
-        [`${prefix}--text-input--invalid`]: !readOnly && isValid === false,
-        [`${prefix}--slider-text-input--hidden`]: hideTextInput,
-        [`${prefix}--slider-text-input--warn`]: !readOnly && warn
+        [`${prefix}--slider-text-input--hidden`]: hideTextInput
+      };
+      const lowerInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--lower`, conditionalInputClasses, {
+        [`${prefix}--text-input--invalid`]: !readOnly && !isValid,
+        [`${prefix}--slider-text-input--warn`]: showWarning
+      }]);
+      const upperInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--upper`, conditionalInputClasses, {
+        [`${prefix}--text-input--invalid`]: !readOnly && (twoHandles ? !isValidUpper : !isValid),
+        [`${prefix}--slider-text-input--warn`]: showWarningUpper
+      }]);
+      const lowerInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--lower`, {
+        [`${prefix}--text-input-wrapper--readonly`]: readOnly
+      }]);
+      const upperInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--upper`, {
+        [`${prefix}--text-input-wrapper--readonly`]: readOnly
+      }]);
+      const lowerThumbClasses = cx(`${prefix}--slider__thumb`, {
+        [`${prefix}--slider__thumb--lower`]: twoHandles
+      });
+      const upperThumbClasses = cx(`${prefix}--slider__thumb`, {
+        [`${prefix}--slider__thumb--upper`]: twoHandles
       });
       return /*#__PURE__*/React__default.createElement("div", {
         className: cx(`${prefix}--form-item`, className)
-      }, /*#__PURE__*/React__default.createElement("label", {
-        htmlFor: id,
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        as: "label",
+        htmlFor: twoHandles ? undefined : id,
         className: labelClasses,
         id: labelId
       }, labelText), /*#__PURE__*/React__default.createElement("div", {
-        className: `${prefix}--slider-container`
-      }, /*#__PURE__*/React__default.createElement("span", {
+        className: containerClasses
+      }, twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+        className: lowerInputWrapperClasses
+      }, /*#__PURE__*/React__default.createElement("input", {
+        type: hideTextInput ? 'hidden' : inputType,
+        id: `${id}-lower-input-for-slider`,
+        name: name,
+        className: lowerInputClasses,
+        value: value,
+        "aria-label": ariaLabelInput,
+        disabled: disabled,
+        required: required,
+        min: min,
+        max: max,
+        step: step,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        onKeyUp: this.props.onInputKeyUp,
+        onKeyDown: this.onInputKeyDown,
+        "data-invalid": !isValid && !readOnly ? true : null,
+        "data-handle-position": HandlePosition.LOWER,
+        "aria-invalid": !isValid && !readOnly ? true : undefined,
+        readOnly: readOnly
+      }), !readOnly && !isValid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+        className: `${prefix}--slider__invalid-icon`
+      }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+        className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
+      })) : null, /*#__PURE__*/React__default.createElement(Text, {
         className: `${prefix}--slider__range-label`
       }, formatLabel(min, minLabel)), /*#__PURE__*/React__default.createElement("div", _extends({
         className: sliderClasses,
@@ -500,18 +1055,34 @@ class Slider extends PureComponent {
         onKeyDown: this.onKeyDown,
         role: "presentation",
         tabIndex: -1,
-        "data-invalid": !isValid && !readOnly ? true : null
+        "data-invalid": (twoHandles ? !isValid || !isValidUpper : !isValid) && !readOnly ? true : null
       }, other), /*#__PURE__*/React__default.createElement("div", {
-        className: `${prefix}--slider__thumb`,
+        className: lowerThumbClasses,
         role: "slider",
-        id: id,
+        id: twoHandles ? undefined : id,
         tabIndex: !readOnly ? 0 : -1,
-        "aria-valuemax": max,
+        "aria-valuemax": twoHandles ? valueUpper : max,
         "aria-valuemin": min,
         "aria-valuenow": value,
-        "aria-labelledby": labelId,
-        ref: this.thumbRef
-      }), /*#__PURE__*/React__default.createElement("div", {
+        "aria-labelledby": twoHandles ? undefined : labelId,
+        "aria-label": twoHandles ? ariaLabelInput : undefined,
+        ref: this.thumbRef,
+        onFocus: () => this.setState({
+          activeHandle: HandlePosition.LOWER
+        })
+      }, twoHandles && !isRtl && (_LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null))), twoHandles && !isRtl && (_LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))), twoHandles && isRtl && (_UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null))), twoHandles && isRtl && (_UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null)))), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+        className: upperThumbClasses,
+        role: "slider",
+        tabIndex: !readOnly ? 0 : -1,
+        "aria-valuemax": max,
+        "aria-valuemin": value,
+        "aria-valuenow": valueUpper,
+        "aria-label": ariaLabelInputUpper,
+        ref: this.thumbRefUpper,
+        onFocus: () => this.setState({
+          activeHandle: HandlePosition.UPPER
+        })
+      }, twoHandles && !isRtl && (_UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null))), twoHandles && !isRtl && (_UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))), twoHandles && isRtl && (_LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null))), twoHandles && isRtl && (_LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null)))) : null, /*#__PURE__*/React__default.createElement("div", {
         className: `${prefix}--slider__track`,
         ref: node => {
           this.track = node;
@@ -519,16 +1090,18 @@ class Slider extends PureComponent {
       }), /*#__PURE__*/React__default.createElement("div", {
         className: `${prefix}--slider__filled-track`,
         ref: this.filledTrackRef
-      })), /*#__PURE__*/React__default.createElement("span", {
+      })), /*#__PURE__*/React__default.createElement(Text, {
         className: `${prefix}--slider__range-label`
-      }, formatLabel(max, maxLabel)), /*#__PURE__*/React__default.createElement("input", {
+      }, formatLabel(max, maxLabel)), /*#__PURE__*/React__default.createElement("div", {
+        className: upperInputWrapperClasses
+      }, /*#__PURE__*/React__default.createElement("input", {
         type: hideTextInput ? 'hidden' : inputType,
-        id: `${id}-input-for-slider`,
-        name: name,
-        className: inputClasses,
-        value: value,
-        "aria-labelledby": !ariaLabelInput ? labelId : undefined,
-        "aria-label": ariaLabelInput ? ariaLabelInput : undefined,
+        id: `${id}-${twoHandles ? 'upper-' : ''}input-for-slider`,
+        name: twoHandles ? nameUpper : name,
+        className: upperInputClasses,
+        value: twoHandles ? valueUpper : value,
+        "aria-labelledby": !ariaLabelInput && !twoHandles ? labelId : undefined,
+        "aria-label": twoHandles ? ariaLabelInputUpper : ariaLabelInput ? ariaLabelInput : undefined,
         disabled: disabled,
         required: required,
         min: min,
@@ -536,19 +1109,29 @@ class Slider extends PureComponent {
         step: step,
         onChange: this.onChange,
         onBlur: this.onBlur,
+        onKeyDown: this.onInputKeyDown,
         onKeyUp: this.props.onInputKeyUp,
-        "data-invalid": !isValid && !readOnly ? true : null,
-        "aria-invalid": !isValid && !readOnly ? true : undefined,
+        "data-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : null,
+        "data-handle-position": twoHandles ? HandlePosition.UPPER : null,
+        "aria-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : undefined,
         readOnly: readOnly
-      }), !readOnly && isValid === false && /*#__PURE__*/React__default.createElement(WarningFilled, {
+      }), !readOnly && (twoHandles ? !isValidUpper : !isValid) && /*#__PURE__*/React__default.createElement(WarningFilled, {
         className: `${prefix}--slider__invalid-icon`
-      }), !readOnly && warn && isValid && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+      }), showWarningUpper && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
         className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
-      })), !readOnly && isValid === false && /*#__PURE__*/React__default.createElement("div", {
+      }))), !readOnly && (!isValid || !isValidUpper) && /*#__PURE__*/React__default.createElement(Text, {
+        as: "div",
         className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
-      }, invalidText), !readOnly && warn && isValid && /*#__PURE__*/React__default.createElement("div", {
+      }, invalidText), !readOnly && warn && isValid && isValidUpper && /*#__PURE__*/React__default.createElement(Text, {
+        as: "div",
         className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
-      }, warnText));
+      }, warnText), correctedValue && /*#__PURE__*/React__default.createElement(Text, {
+        as: "div",
+        role: "alert",
+        className: cx(`${prefix}--slider__status-msg`, `${prefix}--form-requirement`)
+      }, t(translationIds.autoCorrectAnnouncement, {
+        correctedValue
+      })));
     });
   }
 }
@@ -647,7 +1230,7 @@ _defineProperty(Slider, "propTypes", {
    */
   required: PropTypes.bool,
   /**
-   * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
+   * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside the `step` increment will be considered invalid.
    */
   step: PropTypes.number,
   /**
@@ -656,7 +1239,26 @@ _defineProperty(Slider, "propTypes", {
    */
   stepMultiplier: PropTypes.number,
   /**
-   * The value.
+   * Supply a method to translate internal strings with your i18n tool of
+   * choice. Translation keys are available on the `translationIds` field for
+   * this component.
+   */
+  translateWithId: PropTypes.func,
+  /**
+   * The `ariaLabel` for the upper bound `<input>` when there are two handles.
+   */
+  unstable_ariaLabelInputUpper: PropTypes.string,
+  /**
+   * The `name` attribute of the upper bound `<input>` when there are two handles.
+   */
+  unstable_nameUpper: PropTypes.string,
+  /**
+   * The upper bound when there are two handles.
+   */
+  unstable_valueUpper: PropTypes.number,
+  /**
+   * The value of the slider. When there are two handles, value is the lower
+   * bound.
    */
   value: PropTypes.number.isRequired,
   /**
@@ -664,20 +1266,11 @@ _defineProperty(Slider, "propTypes", {
    */
   warn: PropTypes.bool,
   /**
-   * Provide the text that is displayed when the Slider is in an warn state
+   * Provide the text that is displayed when the Slider is in a warn state
    */
   warnText: PropTypes.node
 });
-_defineProperty(Slider, "defaultProps", {
-  hideTextInput: false,
-  step: 1,
-  stepMultiplier: 4,
-  disabled: false,
-  minLabel: '',
-  maxLabel: '',
-  inputType: 'number',
-  readOnly: false
-});
 _defineProperty(Slider, "contextType", FeatureFlagContext);
+Slider.translationIds = Object.values(translationIds);
 
 export { Slider as default };