@carbon/react 1.102.0 → 1.103.0

package/lib/components/Slider/Slider.js

@@ -25,6 +25,7 @@ var Tooltip = require('../Tooltip/Tooltip.js');
 var SliderHandles = require('./SliderHandles.js');
 var clamp = require('../../internal/clamp.js');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
+var useId = require('../../internal/useId.js');
 var throttle = require('../../node_modules/es-toolkit/dist/compat/function/throttle.js');
 
 const ThumbWrapper = ({
@@ -62,6 +63,7 @@ const defaultTranslateWithId = (messageId, args) => {
 const defaultFormatLabel = (value, label) => {
   return `${value}${label ?? ''}`;
 };
+const hasUpperValue = valueUpper => typeof valueUpper !== 'undefined';
 
 // TODO: Assuming a 16ms throttle corresponds to 60 FPS, should it be halved,
 // since many systems can handle 120 FPS? If it doesn't correspond to 60 FPS,
@@ -78,7 +80,6 @@ var HandlePosition = /*#__PURE__*/function (HandlePosition) {
   return HandlePosition;
 }(HandlePosition || {}); // TODO: Delete this type and directory type the properties in the function.
 const Slider = props => {
-  var _Fragment, _Fragment2, _Fragment3, _Fragment4;
   // TODO: Move destructured `props` from the IIFE to here.
 
   const initialState = {
@@ -115,14 +116,9 @@ const Slider = props => {
   const filledTrackRef = React.useRef(null);
   const elementRef = React.useRef(null);
   const trackRef = React.useRef(null);
-  const inputIdRef = React.useRef('');
-
-  // TODO: Delete this function and set its return value as the value of
-  // `twoHandles`.
-  const hasTwoHandles = () => {
-    return typeof state.valueUpper !== 'undefined';
-  };
-  const twoHandles = hasTwoHandles();
+  const generatedId = useId.useId();
+  const prefix = usePrefix.usePrefix();
+  const twoHandles = hasUpperValue(state.valueUpper);
 
   /**
    * Sets up initial slider position and value in response to component mount.
@@ -130,7 +126,7 @@ const Slider = props => {
   React.useEffect(() => {
     if (elementRef.current) {
       const isRtl = document?.dir === 'rtl';
-      if (hasTwoHandles()) {
+      if (twoHandles) {
         const {
           value,
           left
@@ -182,7 +178,7 @@ const Slider = props => {
 
     // 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 (twoHandles) {
       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})`;
       }
@@ -275,8 +271,7 @@ const Slider = props => {
    * @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;
+    const decimals = (props.step?.toString().split('.')[1] ?? '').length;
     return Number(value.toFixed(decimals));
   };
   const handleDrag = event => {
@@ -316,7 +311,7 @@ const Slider = props => {
     });
     const clientX = getClientXFromEvent(evt.nativeEvent);
     let activeHandle;
-    if (hasTwoHandles()) {
+    if (twoHandles) {
       if (evt.target == thumbRef.current) {
         activeHandle = HandlePosition.LOWER;
       } else if (evt.target == thumbRefUpper.current) {
@@ -336,7 +331,7 @@ const Slider = props => {
     const focusOptions = {
       preventScroll: true
     };
-    if (hasTwoHandles()) {
+    if (twoHandles) {
       if (thumbRef.current && activeHandle === HandlePosition.LOWER) {
         thumbRef.current.focus(focusOptions);
       } else if (thumbRefUpper.current && activeHandle === HandlePosition.UPPER) {
@@ -409,7 +404,7 @@ const Slider = props => {
     });
     // If we're set to two handles, negotiate which drag handle is closest to
     // the users' interaction.
-    if (hasTwoHandles() && activeHandle) {
+    if (twoHandles && activeHandle) {
       setValueLeftForHandle(activeHandle, {
         value: nearestStepValue(value),
         left
@@ -467,7 +462,7 @@ const Slider = props => {
     if (evt.shiftKey) {
       delta *= stepMultiplier;
     }
-    if (hasTwoHandles() && state.activeHandle) {
+    if (twoHandles && state.activeHandle) {
       const currentValue = state.activeHandle === HandlePosition.LOWER ? state.value : state.valueUpper;
       const {
         value,
@@ -521,7 +516,7 @@ const Slider = props => {
     // 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 (twoHandles) {
       if (isNaN(targetValue)) {
         setValueForHandle(activeHandle, evt.target.value);
       } else if (isValidValueForPosition({
@@ -937,13 +932,7 @@ const Slider = props => {
     unstable_ariaLabelInputUpper: ariaLabelInputUpper,
     className,
     hideTextInput = false,
-    id = inputIdRef.current = inputIdRef.current ||
-    // TODO:
-    // 1. Why isn't `inputId` just set to this value instead of an empty
-    //    string?
-    // 2. Why this value instead of something else, like
-    //    `crypto.randomUUID()` or `useId()`?
-    `__carbon-slider_${Math.random().toString(36).substr(2)}`,
+    id: idProp,
     min,
     minLabel,
     max,
@@ -952,9 +941,6 @@ const Slider = props => {
     labelText,
     hideLabel,
     step = 1,
-    // TODO: Other properties are deleted below. Why isn't this one?
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-    stepMultiplier: _stepMultiplier,
     inputType = 'number',
     invalidText,
     required,
@@ -968,6 +954,7 @@ const Slider = props => {
     translateWithId: t = defaultTranslateWithId,
     ...other
   } = props;
+  const id = idProp ?? generatedId;
   const {
     value,
     valueUpper,
@@ -991,226 +978,220 @@ const Slider = props => {
     invalid: !isValidUpper,
     warn
   });
-
-  // TODO: Delete this IIFE. It was added to maintain whitespace and to make it clear
-  // what exactly has changed.
-  return (() => {
-    delete other.onRelease;
-    delete other.invalid;
-    delete other.unstable_valueUpper;
-    const showWarning = normalizedProps.warn || correctedPosition === HandlePosition.LOWER && isValid;
-    const showWarningUpper = normalizedUpperProps.warn || correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
-    return /*#__PURE__*/React.createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
-      const labelId = `${id}-label`;
-      const labelClasses = cx(`${prefix}--label`, {
-        [`${prefix}--visually-hidden`]: hideLabel,
-        [`${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,
-        [`${prefix}--slider-container--rtl`]: isRtl
-      });
-      const sliderClasses = cx(`${prefix}--slider`, {
-        [`${prefix}--slider--disabled`]: disabled,
-        [`${prefix}--slider--readonly`]: readOnly
-      });
-      const fixedInputClasses = [`${prefix}--text-input`, `${prefix}--slider-text-input`];
-      const conditionalInputClasses = {
-        [`${prefix}--text-input--light`]: light
-      };
-      const lowerInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--lower`, conditionalInputClasses, {
-        [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
-        [`${prefix}--slider-text-input--warn`]: showWarning
-      }]);
-      const upperInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--upper`, conditionalInputClasses, {
-        [`${prefix}--text-input--invalid`]: twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid,
-        [`${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,
-        [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
-      }]);
-      const upperInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--upper`, {
-        [`${prefix}--text-input-wrapper--readonly`]: readOnly,
-        [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
-      }]);
-      const lowerThumbClasses = cx(`${prefix}--slider__thumb`, {
-        [`${prefix}--slider__thumb--lower`]: twoHandles
-      });
-      const upperThumbClasses = cx(`${prefix}--slider__thumb`, {
-        [`${prefix}--slider__thumb--upper`]: twoHandles
-      });
-      const lowerThumbWrapperClasses = cx([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
-        [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
-      }]);
-      const upperThumbWrapperClasses = cx([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
-        [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
-      }]);
-      const lowerThumbWrapperProps = {
-        style: {
-          insetInlineStart: `${state.left}%`
-        }
-      };
-      const upperThumbWrapperProps = {
-        style: {
-          insetInlineStart: `${state.leftUpper}%`
-        }
-      };
-      return /*#__PURE__*/React.createElement("div", {
-        className: cx(`${prefix}--form-item`, className)
-      }, /*#__PURE__*/React.createElement(Text.Text, {
-        as: "label",
-        htmlFor: twoHandles ? undefined : id,
-        className: labelClasses,
-        id: labelId
-      }, labelText), /*#__PURE__*/React.createElement("div", {
-        className: containerClasses
-      }, twoHandles ? /*#__PURE__*/React.createElement("div", {
-        className: lowerInputWrapperClasses
-      }, /*#__PURE__*/React.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: onChangeInput,
-        onBlur: onBlurInput,
-        onKeyUp: props.onInputKeyUp,
-        onKeyDown: onInputKeyDown,
-        "data-invalid": normalizedProps.invalid ? true : null,
-        "data-handle-position": HandlePosition.LOWER,
-        "aria-invalid": normalizedProps.invalid ? true : undefined,
-        readOnly: readOnly
-      }), normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
-        className: `${prefix}--slider__invalid-icon`
-      }), showWarning && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
-        className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
-      })) : null, /*#__PURE__*/React.createElement(Text.Text, {
-        className: `${prefix}--slider__range-label`
-      }, formatLabel(min, minLabel)), /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-        className: sliderClasses,
-        ref: node => {
-          elementRef.current = node;
-        },
-        onMouseDown: onDragStart,
-        onTouchStart: onDragStart,
-        onKeyDown: onKeyDown,
-        role: "presentation",
-        tabIndex: -1,
-        "data-invalid": (twoHandles ? normalizedProps.invalid || normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null
-      }, other), /*#__PURE__*/React.createElement(ThumbWrapper, _rollupPluginBabelHelpers.extends({
-        hasTooltip: hideTextInput,
-        className: lowerThumbWrapperClasses,
-        label: formatLabel(value, undefined),
-        align: "top"
-      }, lowerThumbWrapperProps), /*#__PURE__*/React.createElement("div", {
-        className: lowerThumbClasses,
-        role: "slider",
-        id: twoHandles ? undefined : id,
-        tabIndex: readOnly || disabled ? undefined : 0,
-        "aria-valuetext": formatLabel(value, undefined),
-        "aria-valuemax": twoHandles ? valueUpper : max,
-        "aria-valuemin": min,
-        "aria-valuenow": value,
-        "aria-labelledby": twoHandles ? undefined : labelId,
-        "aria-label": twoHandles ? ariaLabelInput : undefined,
-        ref: thumbRef,
-        onFocus: () => setState({
-          activeHandle: HandlePosition.LOWER
-        })
-      }, twoHandles && !isRtl ? _Fragment || (_Fragment = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.LowerHandle, {
-        "aria-label": ariaLabelInput
-      }), /*#__PURE__*/React.createElement(SliderHandles.LowerHandleFocus, {
-        "aria-label": ariaLabelInput
-      }))) : twoHandles && isRtl ? _Fragment2 || (_Fragment2 = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.UpperHandle, {
-        "aria-label": ariaLabelInputUpper
-      }), /*#__PURE__*/React.createElement(SliderHandles.UpperHandleFocus, {
-        "aria-label": ariaLabelInputUpper
-      }))) : undefined)), twoHandles ? /*#__PURE__*/React.createElement(ThumbWrapper, _rollupPluginBabelHelpers.extends({
-        hasTooltip: hideTextInput,
-        className: upperThumbWrapperClasses,
-        label: formatLabel(valueUpper ?? 0, undefined),
-        align: "top"
-      }, upperThumbWrapperProps), /*#__PURE__*/React.createElement("div", {
-        className: upperThumbClasses,
-        role: "slider",
-        tabIndex: readOnly || disabled ? undefined : 0,
-        "aria-valuemax": max,
-        "aria-valuemin": value,
-        "aria-valuenow": valueUpper,
-        "aria-label": ariaLabelInputUpper,
-        ref: thumbRefUpper,
-        onFocus: () => setState({
-          activeHandle: HandlePosition.UPPER
-        })
-      }, twoHandles && !isRtl ? _Fragment3 || (_Fragment3 = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.UpperHandle, {
-        "aria-label": ariaLabelInputUpper
-      }), /*#__PURE__*/React.createElement(SliderHandles.UpperHandleFocus, {
-        "aria-label": ariaLabelInputUpper
-      }))) : twoHandles && isRtl ? _Fragment4 || (_Fragment4 = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.LowerHandle, {
-        "aria-label": ariaLabelInput
-      }), /*#__PURE__*/React.createElement(SliderHandles.LowerHandleFocus, {
-        "aria-label": ariaLabelInput
-      }))) : undefined)) : null, /*#__PURE__*/React.createElement("div", {
-        className: `${prefix}--slider__track`,
-        ref: node => {
-          trackRef.current = node;
-        }
-      }), /*#__PURE__*/React.createElement("div", {
-        className: `${prefix}--slider__filled-track`,
-        ref: filledTrackRef
-      })), /*#__PURE__*/React.createElement(Text.Text, {
-        className: `${prefix}--slider__range-label`
-      }, formatLabel(max, maxLabel)), /*#__PURE__*/React.createElement("div", {
-        className: upperInputWrapperClasses
-      }, /*#__PURE__*/React.createElement("input", {
-        type: hideTextInput ? 'hidden' : inputType,
-        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,
-        max: max,
-        step: step,
-        onChange: onChangeInput,
-        onBlur: onBlurInput,
-        onKeyDown: onInputKeyDown,
-        onKeyUp: props.onInputKeyUp,
-        "data-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null,
-        "data-handle-position": twoHandles ? HandlePosition.UPPER : null,
-        "aria-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : undefined,
-        readOnly: readOnly
-      }), (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
-        className: `${prefix}--slider__invalid-icon`
-      }), showWarningUpper && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
-        className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
-      }))), (normalizedProps.invalid || normalizedUpperProps.invalid) && /*#__PURE__*/React.createElement(Text.Text, {
-        as: "div",
-        className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
-      }, invalidText), (normalizedProps.warn || normalizedUpperProps.warn) && /*#__PURE__*/React.createElement(Text.Text, {
-        as: "div",
-        className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
-      }, warnText), correctedValue && /*#__PURE__*/React.createElement(Text.Text, {
-        as: "div",
-        role: "alert",
-        className: cx(`${prefix}--slider__status-msg`, `${prefix}--form-requirement`)
-      }, t(translationIds['carbon.slider.auto-correct-announcement'], {
-        correctedValue
-      })));
-    });
-  })();
+  delete other.invalid;
+  delete other.onRelease;
+  delete other.stepMultiplier;
+  delete other.unstable_valueUpper;
+  const showWarning = normalizedProps.warn || correctedPosition === HandlePosition.LOWER && isValid;
+  const showWarningUpper = normalizedUpperProps.warn || correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
+  const labelId = `${id}-label`;
+  const labelClasses = cx(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${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,
+    [`${prefix}--slider-container--rtl`]: isRtl
+  });
+  const sliderClasses = cx(`${prefix}--slider`, {
+    [`${prefix}--slider--disabled`]: disabled,
+    [`${prefix}--slider--readonly`]: readOnly
+  });
+  const fixedInputClasses = [`${prefix}--text-input`, `${prefix}--slider-text-input`];
+  const conditionalInputClasses = {
+    [`${prefix}--text-input--light`]: light
+  };
+  const lowerInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--lower`, conditionalInputClasses, {
+    [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+    [`${prefix}--slider-text-input--warn`]: showWarning
+  }]);
+  const upperInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--upper`, conditionalInputClasses, {
+    [`${prefix}--text-input--invalid`]: twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid,
+    [`${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,
+    [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
+  }]);
+  const upperInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--upper`, {
+    [`${prefix}--text-input-wrapper--readonly`]: readOnly,
+    [`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
+  }]);
+  const lowerThumbClasses = cx(`${prefix}--slider__thumb`, {
+    [`${prefix}--slider__thumb--lower`]: twoHandles
+  });
+  const upperThumbClasses = cx(`${prefix}--slider__thumb`, {
+    [`${prefix}--slider__thumb--upper`]: twoHandles
+  });
+  const lowerThumbWrapperClasses = cx([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
+  }]);
+  const upperThumbWrapperClasses = cx([`${prefix}--icon-tooltip`, `${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
+  }]);
+  const lowerThumbWrapperProps = {
+    style: {
+      insetInlineStart: `${state.left}%`
+    }
+  };
+  const upperThumbWrapperProps = {
+    style: {
+      insetInlineStart: `${state.leftUpper}%`
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(`${prefix}--form-item`, className)
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "label",
+    htmlFor: twoHandles ? undefined : id,
+    className: labelClasses,
+    id: labelId
+  }, labelText), /*#__PURE__*/React.createElement("div", {
+    className: containerClasses
+  }, twoHandles ? /*#__PURE__*/React.createElement("div", {
+    className: lowerInputWrapperClasses
+  }, /*#__PURE__*/React.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: onChangeInput,
+    onBlur: onBlurInput,
+    onKeyUp: props.onInputKeyUp,
+    onKeyDown: onInputKeyDown,
+    "data-invalid": normalizedProps.invalid ? true : null,
+    "data-handle-position": HandlePosition.LOWER,
+    "aria-invalid": normalizedProps.invalid ? true : undefined,
+    readOnly: readOnly
+  }), normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+    className: `${prefix}--slider__invalid-icon`
+  }), showWarning && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
+    className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
+  })) : null, /*#__PURE__*/React.createElement(Text.Text, {
+    className: `${prefix}--slider__range-label`
+  }, formatLabel(min, minLabel)), /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: sliderClasses,
+    ref: node => {
+      elementRef.current = node;
+    },
+    onMouseDown: onDragStart,
+    onTouchStart: onDragStart,
+    onKeyDown: onKeyDown,
+    role: "presentation",
+    tabIndex: -1,
+    "data-invalid": (twoHandles ? normalizedProps.invalid || normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null
+  }, other), /*#__PURE__*/React.createElement(ThumbWrapper, _rollupPluginBabelHelpers.extends({
+    hasTooltip: hideTextInput,
+    className: lowerThumbWrapperClasses,
+    label: formatLabel(value, undefined),
+    align: "top"
+  }, lowerThumbWrapperProps), /*#__PURE__*/React.createElement("div", {
+    className: lowerThumbClasses,
+    role: "slider",
+    id: twoHandles ? undefined : id,
+    tabIndex: readOnly || disabled ? undefined : 0,
+    "aria-valuetext": formatLabel(value, undefined),
+    "aria-valuemax": twoHandles ? valueUpper : max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    "aria-labelledby": twoHandles ? undefined : labelId,
+    "aria-label": twoHandles ? ariaLabelInput : undefined,
+    ref: thumbRef,
+    onFocus: () => setState({
+      activeHandle: HandlePosition.LOWER
+    })
+  }, twoHandles && !isRtl ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.LowerHandle, {
+    "aria-label": ariaLabelInput
+  }), /*#__PURE__*/React.createElement(SliderHandles.LowerHandleFocus, {
+    "aria-label": ariaLabelInput
+  })) : twoHandles && isRtl ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.UpperHandle, {
+    "aria-label": ariaLabelInputUpper
+  }), /*#__PURE__*/React.createElement(SliderHandles.UpperHandleFocus, {
+    "aria-label": ariaLabelInputUpper
+  })) : undefined)), hasUpperValue(valueUpper) ? /*#__PURE__*/React.createElement(ThumbWrapper, _rollupPluginBabelHelpers.extends({
+    hasTooltip: hideTextInput,
+    className: upperThumbWrapperClasses,
+    label: formatLabel(valueUpper, undefined),
+    align: "top"
+  }, upperThumbWrapperProps), /*#__PURE__*/React.createElement("div", {
+    className: upperThumbClasses,
+    role: "slider",
+    tabIndex: readOnly || disabled ? undefined : 0,
+    "aria-valuemax": max,
+    "aria-valuemin": value,
+    "aria-valuenow": valueUpper,
+    "aria-label": ariaLabelInputUpper,
+    ref: thumbRefUpper,
+    onFocus: () => setState({
+      activeHandle: HandlePosition.UPPER
+    })
+  }, !isRtl ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.UpperHandle, {
+    "aria-label": ariaLabelInputUpper
+  }), /*#__PURE__*/React.createElement(SliderHandles.UpperHandleFocus, {
+    "aria-label": ariaLabelInputUpper
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderHandles.LowerHandle, {
+    "aria-label": ariaLabelInput
+  }), /*#__PURE__*/React.createElement(SliderHandles.LowerHandleFocus, {
+    "aria-label": ariaLabelInput
+  })))) : null, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--slider__track`,
+    ref: node => {
+      trackRef.current = node;
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--slider__filled-track`,
+    ref: filledTrackRef
+  })), /*#__PURE__*/React.createElement(Text.Text, {
+    className: `${prefix}--slider__range-label`
+  }, formatLabel(max, maxLabel)), /*#__PURE__*/React.createElement("div", {
+    className: upperInputWrapperClasses
+  }, /*#__PURE__*/React.createElement("input", {
+    type: hideTextInput ? 'hidden' : inputType,
+    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,
+    max: max,
+    step: step,
+    onChange: onChangeInput,
+    onBlur: onBlurInput,
+    onKeyDown: onInputKeyDown,
+    onKeyUp: props.onInputKeyUp,
+    "data-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null,
+    "data-handle-position": twoHandles ? HandlePosition.UPPER : null,
+    "aria-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : undefined,
+    readOnly: readOnly
+  }), (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+    className: `${prefix}--slider__invalid-icon`
+  }), showWarningUpper && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
+    className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
+  }))), (normalizedProps.invalid || normalizedUpperProps.invalid) && /*#__PURE__*/React.createElement(Text.Text, {
+    as: "div",
+    className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
+  }, invalidText), (normalizedProps.warn || normalizedUpperProps.warn) && /*#__PURE__*/React.createElement(Text.Text, {
+    as: "div",
+    className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
+  }, warnText), correctedValue && /*#__PURE__*/React.createElement(Text.Text, {
+    as: "div",
+    role: "alert",
+    className: cx(`${prefix}--slider__status-msg`, `${prefix}--form-requirement`)
+  }, t(translationIds['carbon.slider.auto-correct-announcement'], {
+    correctedValue
+  })));
 };
 Slider.propTypes = {
   /**