@carbon/react 1.27.0 → 1.28.0

package/lib/components/Slider/Slider.js

@@ -47,113 +47,102 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["ariaLabelInput", "className", "hideTextInput", "id", "min", "minLabel", "max", "maxLabel", "formatLabel", "labelText", "step", "stepMultiplier", "inputType", "required", "disabled", "name", "light", "readOnly"];
-
-var defaultFormatLabel = function defaultFormatLabel(value, label) {
-  return typeof label === 'function' ? label(value) : "".concat(value).concat(label);
+const defaultFormatLabel = (value, label) => {
+  return typeof label === 'function' ? label(value) : `${value}${label}`;
 };
 /**
  * Minimum time between processed "drag" events.
  */
 
 
-var EVENT_THROTTLE = 16; // ms
+const EVENT_THROTTLE = 16; // ms
 
 /**
  * Event types that trigger "drags".
  */
 
-var DRAG_EVENT_TYPES = new Set(['mousemove', 'touchmove']);
+const DRAG_EVENT_TYPES = new Set(['mousemove', 'touchmove']);
 /**
  * Event types that trigger a "drag" to stop.
  */
 
-var DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-
-var Slider = /*#__PURE__*/function (_PureComponent) {
-  _rollupPluginBabelHelpers.inherits(Slider, _PureComponent);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(Slider);
-
-  function Slider(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, Slider);
-
-    _this = _super.call(this, props);
+const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
+class Slider extends React.PureComponent {
+  constructor(props) {
+    super(props);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
-      value: _this.props.value,
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
+      value: this.props.value,
       left: 0,
       needsOnRelease: false,
       isValid: true
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "thumbRef", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "thumbRef", void 0);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "filledTrackRef", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "filledTrackRef", void 0);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "element", null);
+    _rollupPluginBabelHelpers.defineProperty(this, "element", null);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "inputId", '');
+    _rollupPluginBabelHelpers.defineProperty(this, "inputId", '');
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "track", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "track", void 0);
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onDragStart", function (evt) {
+    _rollupPluginBabelHelpers.defineProperty(this, "onDragStart", evt => {
       // Do nothing if component is disabled
-      if (_this.props.disabled || _this.props.readOnly) {
+      if (this.props.disabled || this.props.readOnly) {
         return;
       } // Register drag stop handlers
 
 
-      DRAG_STOP_EVENT_TYPES.forEach(function (element) {
+      DRAG_STOP_EVENT_TYPES.forEach(element => {
         var _this$element;
 
-        (_this$element = _this.element) === null || _this$element === void 0 ? void 0 : _this$element.ownerDocument.addEventListener(element, _this.onDragStop);
+        (_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.ownerDocument.addEventListener(element, this.onDragStop);
       }); // Register drag handlers
 
-      DRAG_EVENT_TYPES.forEach(function (element) {
+      DRAG_EVENT_TYPES.forEach(element => {
         var _this$element2;
 
-        (_this$element2 = _this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.ownerDocument.addEventListener(element, _this.onDrag);
+        (_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.ownerDocument.addEventListener(element, this.onDrag);
       }); // Perform first recalculation since we probably didn't click exactly in the
       // middle of the thumb
 
-      _this.onDrag(evt);
+      this.onDrag(evt);
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onDragStop", function () {
+    _rollupPluginBabelHelpers.defineProperty(this, "onDragStop", () => {
       // Do nothing if component is disabled
-      if (_this.props.disabled || _this.props.readOnly) {
+      if (this.props.disabled || this.props.readOnly) {
         return;
       } // Remove drag stop handlers
 
 
-      DRAG_STOP_EVENT_TYPES.forEach(function (element) {
+      DRAG_STOP_EVENT_TYPES.forEach(element => {
         var _this$element3;
 
-        (_this$element3 = _this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.ownerDocument.removeEventListener(element, _this.onDragStop);
+        (_this$element3 = this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.ownerDocument.removeEventListener(element, this.onDragStop);
       }); // Remove drag handlers
 
-      DRAG_EVENT_TYPES.forEach(function (element) {
+      DRAG_EVENT_TYPES.forEach(element => {
         var _this$element4;
 
-        (_this$element4 = _this.element) === null || _this$element4 === void 0 ? void 0 : _this$element4.ownerDocument.removeEventListener(element, _this.onDrag);
+        (_this$element4 = this.element) === null || _this$element4 === void 0 ? void 0 : _this$element4.ownerDocument.removeEventListener(element, this.onDrag);
       }); // Set needsOnRelease flag so event fires on next update
 
-      _this.setState({
+      this.setState({
         needsOnRelease: true,
         isValid: true
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_onDrag", function (evt) {
+    _rollupPluginBabelHelpers.defineProperty(this, "_onDrag", evt => {
       // Do nothing if component is disabled or we have no event
-      if (_this.props.disabled || _this.props.readOnly || !evt) {
+      if (this.props.disabled || this.props.readOnly || !evt) {
         return;
       }
 
-      var clientX;
+      let clientX;
 
       if ('clientX' in evt) {
         clientX = evt.clientX;
@@ -164,42 +153,36 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      var _this$calcValue = _this.calcValue({
-        clientX: clientX
-      }),
-          value = _this$calcValue.value,
-          left = _this$calcValue.left;
-
-      _this.setState({
-        value: value,
-        left: left,
+      const {
+        value,
+        left
+      } = this.calcValue({
+        clientX
+      });
+      this.setState({
+        value,
+        left,
         isValid: true
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onDrag", throttle__default["default"](_this._onDrag, EVENT_THROTTLE, {
+    _rollupPluginBabelHelpers.defineProperty(this, "onDrag", throttle__default["default"](this._onDrag, EVENT_THROTTLE, {
       leading: true,
       trailing: false
     }));
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onKeyDown", function (evt) {
-      var _this$props$step3, _this$props$step4, _this$props$step5, _this$props$step6;
-
+    _rollupPluginBabelHelpers.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)) {
+      if (this.props.disabled || this.props.readOnly || !('which' in evt)) {
         return;
       }
 
-      var delta = 0;
+      let delta = 0;
 
       if (match.matches(evt.which, [keys.ArrowDown, keys.ArrowLeft])) {
-        var _this$props$step;
-
-        delta = -((_this$props$step = _this.props.step) !== null && _this$props$step !== void 0 ? _this$props$step : Slider.defaultProps.step);
+        delta = -(this.props.step ?? Slider.defaultProps.step);
       } else if (match.matches(evt.which, [keys.ArrowUp, keys.ArrowRight])) {
-        var _this$props$step2;
-
-        delta = (_this$props$step2 = _this.props.step) !== null && _this$props$step2 !== void 0 ? _this$props$step2 : Slider.defaultProps.step;
+        delta = this.props.step ?? Slider.defaultProps.step;
       } else {
         // Ignore keys we don't want to handle
         return;
@@ -207,30 +190,29 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       if (evt.shiftKey) {
-        var stepMultiplier = _this.props.stepMultiplier;
-        delta *= stepMultiplier !== null && stepMultiplier !== void 0 ? stepMultiplier : Slider.defaultProps.stepMultiplier;
+        const stepMultiplier = this.props.stepMultiplier;
+        delta *= stepMultiplier ?? Slider.defaultProps.stepMultiplier;
       }
 
-      Math.floor(_this.state.value / ((_this$props$step3 = _this.props.step) !== null && _this$props$step3 !== void 0 ? _this$props$step3 : Slider.defaultProps.step)) * ((_this$props$step4 = _this.props.step) !== null && _this$props$step4 !== void 0 ? _this$props$step4 : Slider.defaultProps.step);
-
-      var _this$calcValue2 = _this.calcValue({
+      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$step5 = _this.props.step) !== null && _this$props$step5 !== void 0 ? _this$props$step5 : Slider.defaultProps.step)) * ((_this$props$step6 = _this.props.step) !== null && _this$props$step6 !== void 0 ? _this$props$step6 : Slider.defaultProps.step) : _this.state.value) + delta
-      }),
-          value = _this$calcValue2.value,
-          left = _this$calcValue2.left;
-
-      _this.setState({
-        value: value,
-        left: left,
+        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,
+        left,
         isValid: true
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onChange", function (evt) {
+    _rollupPluginBabelHelpers.defineProperty(this, "onChange", evt => {
       // Do nothing if component is disabled
-      if (_this.props.disabled || _this.props.readOnly) {
+      if (this.props.disabled || this.props.readOnly) {
         return;
       } // Do nothing if we have no valid event, target, or value
 
@@ -239,28 +221,28 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         return;
       }
 
-      var targetValue = Number.parseFloat(evt.target.value); // Avoid calling calcValue for invalid numbers, but still update the state
+      const targetValue = Number.parseFloat(evt.target.value); // Avoid calling calcValue for invalid numbers, but still update the state
 
       if (isNaN(targetValue)) {
-        _this.setState({
+        this.setState({
           value: evt.target.value
         });
       } else {
-        var _this$calcValue3 = _this.calcValue({
+        const {
+          value,
+          left
+        } = this.calcValue({
           value: targetValue,
           useRawValue: true
-        }),
-            _value = _this$calcValue3.value,
-            left = _this$calcValue3.left;
-
-        _this.setState({
-          value: _value,
-          left: left
+        });
+        this.setState({
+          value,
+          left
         });
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onBlur", function (evt) {
+    _rollupPluginBabelHelpers.defineProperty(this, "onBlur", evt => {
       var _this$props$onBlur, _this$props;
 
       // Do nothing if we have no valid event, target, or value
@@ -269,29 +251,30 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       } // determine validity of input change after clicking out of input
 
 
-      var validity = evt.target.checkValidity();
-      var value = evt.target.value;
-
-      _this.setState({
+      const validity = evt.target.checkValidity();
+      const {
+        value
+      } = evt.target;
+      this.setState({
         isValid: validity
       });
-
-      (_this$props$onBlur = (_this$props = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, {
-        value: value
+      (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, {
+        value
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "calcValue", function (_ref) {
-      var _this$element5, _this$element5$getBou, _this$props$step7, _this$props$step8;
+    _rollupPluginBabelHelpers.defineProperty(this, "calcValue", _ref => {
+      var _this$element5, _this$element5$getBou;
 
-      var clientX = _ref.clientX,
-          value = _ref.value,
-          _ref$useRawValue = _ref.useRawValue,
-          useRawValue = _ref$useRawValue === void 0 ? false : _ref$useRawValue;
-      var range = _this.props.max - _this.props.min;
-      var boundingRect = (_this$element5 = _this.element) === null || _this$element5 === void 0 ? void 0 : (_this$element5$getBou = _this$element5.getBoundingClientRect) === null || _this$element5$getBou === void 0 ? void 0 : _this$element5$getBou.call(_this$element5);
-      var totalSteps = range / ((_this$props$step7 = _this.props.step) !== null && _this$props$step7 !== void 0 ? _this$props$step7 : Slider.defaultProps.step);
-      var width = boundingRect ? boundingRect.right - boundingRect.left : 0; // Enforce a minimum width of at least 1 for calculations
+      let {
+        clientX,
+        value,
+        useRawValue = false
+      } = _ref;
+      const range = this.props.max - this.props.min;
+      const boundingRect = (_this$element5 = this.element) === null || _this$element5 === void 0 ? void 0 : (_this$element5$getBou = _this$element5.getBoundingClientRect) === null || _this$element5$getBou === void 0 ? void 0 : _this$element5$getBou.call(_this$element5);
+      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;
@@ -299,274 +282,268 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       // use the provided value or state's value to calculate it instead.
 
 
-      var leftPercent;
+      let leftPercent;
 
       if (clientX != null) {
-        var _boundingRect$left;
-
-        var leftOffset = clientX - ((_boundingRect$left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect$left !== void 0 ? _boundingRect$left : 0);
+        const leftOffset = clientX - ((boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) ?? 0);
         leftPercent = leftOffset / width;
       } else {
         if (value == null) {
-          value = _this.state.value;
+          value = this.state.value;
         } // prevent NaN calculation if the range is 0
 
 
-        leftPercent = range === 0 ? 0 : (value - _this.props.min) / range;
+        leftPercent = range === 0 ? 0 : (value - this.props.min) / range;
       }
 
       if (useRawValue) {
         // Adjusts only for min/max of thumb position
         return {
-          value: value,
+          value,
           left: Math.min(1, Math.max(0, leftPercent)) * 100
         };
       }
 
-      var steppedValue = Math.round(leftPercent * totalSteps) * ((_this$props$step8 = _this.props.step) !== null && _this$props$step8 !== void 0 ? _this$props$step8 : Slider.defaultProps.step);
-
-      var steppedPercent = _this.clamp(steppedValue / range, 0, 1);
-
-      steppedValue = _this.clamp(steppedValue + _this.props.min, _this.props.min, _this.props.max);
+      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);
       return {
         value: steppedValue,
         left: steppedPercent * 100
       };
     });
 
-    _this.thumbRef = /*#__PURE__*/React__default["default"].createRef();
-    _this.filledTrackRef = /*#__PURE__*/React__default["default"].createRef();
-    return _this;
+    this.thumbRef = /*#__PURE__*/React__default["default"].createRef();
+    this.filledTrackRef = /*#__PURE__*/React__default["default"].createRef();
   }
   /**
    * Sets up initial slider position and value in response to component mount.
    */
 
 
-  _rollupPluginBabelHelpers.createClass(Slider, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.element) {
-        var _this$calcValue4 = this.calcValue({
-          useRawValue: true
-        }),
-            _value2 = _this$calcValue4.value,
-            left = _this$calcValue4.left;
-
-        this.setState({
-          value: _value2,
-          left: left
-        });
-      }
+  componentDidMount() {
+    if (this.element) {
+      const {
+        value,
+        left
+      } = this.calcValue({
+        useRawValue: true
+      });
+      this.setState({
+        value,
+        left
+      });
     }
-    /**
-     * Handles firing of `onChange` and `onRelease` callbacks to parent in
-     * response to state changes.
-     *
-     * @param {*} prevProps prevProps
-     * @param {*} prevState The previous Slider state, used to see if callbacks
-     * should be called.
-     */
-
-  }, {
-    key: "componentDidUpdate",
-    value: function 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.thumbRef.current) {
-        this.thumbRef.current.style.left = "".concat(this.state.left, "%");
-      }
+  }
+  /**
+   * Handles firing of `onChange` and `onRelease` callbacks to parent in
+   * response to state changes.
+   *
+   * @param {*} prevProps prevProps
+   * @param {*} prevState The previous Slider state, used to see if callbacks
+   * should be called.
+   */
 
-      if (this.filledTrackRef.current) {
-        this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
-      }
 
-      if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
-        this.props.onChange({
-          value: this.state.value
-        });
-      } // Fire onRelease event handler if present and if needed
+  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.thumbRef.current) {
+      this.thumbRef.current.style.left = `${this.state.left}%`;
+    }
+
+    if (this.filledTrackRef.current) {
+      this.filledTrackRef.current.style.transform = `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+    }
 
+    if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
+      this.props.onChange({
+        value: this.state.value
+      });
+    } // 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
-        }); // Reset the flag
 
-        this.setState({
-          needsOnRelease: false
-        });
-      } // If value from props does not change, do nothing here.
-      // Otherwise, do prop -> state sync without "value capping".
+    if (this.state.needsOnRelease && typeof this.props.onRelease === 'function') {
+      this.props.onRelease({
+        value: this.state.value
+      }); // Reset the flag
 
+      this.setState({
+        needsOnRelease: false
+      });
+    } // 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) {
-        return;
-      }
 
-      this.setState(this.calcValue({
-        value: this.props.value,
-        useRawValue: true
-      }));
-    }
-    /**
-     * Synonymous to ECMA2017+ `Math.clamp`.
-     *
-     * @param {number} val
-     * @param {number} min
-     * @param {number} max
-     *
-     * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
-     */
-
-  }, {
-    key: "clamp",
-    value: function clamp(val, min, max) {
-      return Math.max(min, Math.min(val, max));
+    if (prevProps.value === this.props.value && prevProps.max === this.props.max && prevProps.min === this.props.min) {
+      return;
     }
-    /**
-     * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
-     * started on somewhere other than the thumb without a corresponding "move"
-     * event.
-     *
-     * @param {Event} evt The event.
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          ariaLabelInput = _this$props2.ariaLabelInput,
-          className = _this$props2.className,
-          hideTextInput = _this$props2.hideTextInput,
-          _this$props2$id = _this$props2.id,
-          id = _this$props2$id === void 0 ? this.inputId = this.inputId || "__carbon-slider_".concat(Math.random().toString(36).substr(2)) : _this$props2$id,
-          min = _this$props2.min,
-          minLabel = _this$props2.minLabel,
-          max = _this$props2.max,
-          maxLabel = _this$props2.maxLabel,
-          _this$props2$formatLa = _this$props2.formatLabel,
-          formatLabel = _this$props2$formatLa === void 0 ? defaultFormatLabel : _this$props2$formatLa,
-          labelText = _this$props2.labelText,
-          step = _this$props2.step;
-          _this$props2.stepMultiplier;
-          var inputType = _this$props2.inputType,
-          required = _this$props2.required,
-          disabled = _this$props2.disabled,
-          name = _this$props2.name,
-          light = _this$props2.light,
-          readOnly = _this$props2.readOnly,
-          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props2, _excluded);
-
-      delete other.onRelease;
-      delete other.invalid;
-      var _this$state = this.state,
-          value = _this$state.value,
-          isValid = _this$state.isValid;
-      var scope = this.context;
-      var enabled;
-
-      if (scope.enabled) {
-        enabled = scope.enabled('enable-v11-release');
-      }
 
-      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var _classNames4;
-
-        var labelId = "".concat(id, "-label");
-        var labelClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
-        var sliderClasses = cx__default["default"]("".concat(prefix, "--slider"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--slider--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--slider--readonly"), readOnly), [enabled ? null : className]);
-        var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--invalid"), isValid === false), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--slider-text-input--hidden"), hideTextInput), _classNames4));
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
-        }, /*#__PURE__*/React__default["default"].createElement("label", {
-          htmlFor: id,
-          className: labelClasses,
-          id: labelId
-        }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--slider-container")
-        }, /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--slider__range-label")
-        }, formatLabel(min, minLabel)), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-          className: sliderClasses,
-          ref: function ref(node) {
-            _this2.element = node;
-          },
-          onMouseDown: _this2.onDragStart,
-          onTouchStart: _this2.onDragStart,
-          onKeyDown: _this2.onKeyDown,
-          role: "presentation",
-          tabIndex: -1,
-          "data-invalid": isValid ? null : true
-        }, other), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--slider__thumb"),
-          role: "slider",
-          id: id,
-          tabIndex: !readOnly ? 0 : -1,
-          "aria-valuemax": max,
-          "aria-valuemin": min,
-          "aria-valuenow": value,
-          "aria-labelledby": labelId,
-          ref: _this2.thumbRef
-        }), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--slider__track"),
-          ref: function ref(node) {
-            _this2.track = node;
-          }
-        }), /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--slider__filled-track"),
-          ref: _this2.filledTrackRef
-        })), /*#__PURE__*/React__default["default"].createElement("span", {
-          className: "".concat(prefix, "--slider__range-label")
-        }, formatLabel(max, maxLabel)), /*#__PURE__*/React__default["default"].createElement("input", {
-          type: hideTextInput ? 'hidden' : inputType,
-          id: "".concat(id, "-input-for-slider"),
-          name: name,
-          className: inputClasses,
-          value: value,
-          "aria-labelledby": !ariaLabelInput ? labelId : undefined,
-          "aria-label": ariaLabelInput ? ariaLabelInput : undefined,
-          disabled: disabled,
-          required: required,
-          min: min,
-          max: max,
-          step: step,
-          onChange: _this2.onChange,
-          onBlur: _this2.onBlur,
-          onKeyUp: _this2.props.onInputKeyUp,
-          "data-invalid": isValid ? null : true,
-          "aria-invalid": isValid ? undefined : true,
-          readOnly: readOnly
-        })));
-      });
+    this.setState(this.calcValue({
+      value: this.props.value,
+      useRawValue: true
+    }));
+  }
+  /**
+   * Synonymous to ECMA2017+ `Math.clamp`.
+   *
+   * @param {number} val
+   * @param {number} min
+   * @param {number} max
+   *
+   * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
+   */
+
+
+  clamp(val, min, max) {
+    return Math.max(min, Math.min(val, max));
+  }
+  /**
+   * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
+   * started on somewhere other than the thumb without a corresponding "move"
+   * event.
+   *
+   * @param {Event} evt The event.
+   */
+
+
+  // syncs invalid state and prop
+  static getDerivedStateFromProps(props, state) {
+    const {
+      isValid
+    } = state; // will override state in favor of invalid prop
+
+    if (props.invalid === true && isValid === true) {
+      return {
+        isValid: false
+      };
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: // syncs invalid state and prop
-    function getDerivedStateFromProps(props, state) {
-      var isValid = state.isValid; // 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
+      };
+    } //if invalid prop is not provided, state will remain the same
 
-      if (props.invalid === false && isValid === false) {
-        return {
-          isValid: true
-        };
-      } //if invalid prop is not provided, state will remain the same
 
+    return null;
+  }
 
-      return null;
+  render() {
+    const {
+      ariaLabelInput,
+      className,
+      hideTextInput,
+      id = this.inputId = this.inputId || `__carbon-slider_${Math.random().toString(36).substr(2)}`,
+      min,
+      minLabel,
+      max,
+      maxLabel,
+      formatLabel = defaultFormatLabel,
+      labelText,
+      step,
+      stepMultiplier: _stepMultiplier,
+      inputType,
+      required,
+      disabled,
+      name,
+      light,
+      readOnly,
+      ...other
+    } = this.props;
+    delete other.onRelease;
+    delete other.invalid;
+    const {
+      value,
+      isValid
+    } = this.state;
+    const scope = this.context;
+    let enabled;
+
+    if (scope.enabled) {
+      enabled = scope.enabled('enable-v11-release');
     }
-  }]);
 
-  return Slider;
-}(React.PureComponent);
+    return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
+      const labelId = `${id}-label`;
+      const labelClasses = cx__default["default"](`${prefix}--label`, {
+        [`${prefix}--label--disabled`]: disabled
+      });
+      const sliderClasses = cx__default["default"](`${prefix}--slider`, {
+        [`${prefix}--slider--disabled`]: disabled
+      }, {
+        [`${prefix}--slider--readonly`]: readOnly
+      }, [enabled ? null : className]);
+      const inputClasses = cx__default["default"](`${prefix}--text-input`, `${prefix}--slider-text-input`, {
+        [`${prefix}--text-input--light`]: light,
+        [`${prefix}--text-input--invalid`]: isValid === false,
+        [`${prefix}--slider-text-input--hidden`]: hideTextInput
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: enabled ? cx__default["default"](`${prefix}--form-item`, className) : `${prefix}--form-item`
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: id,
+        className: labelClasses,
+        id: labelId
+      }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: `${prefix}--slider-container`
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--slider__range-label`
+      }, formatLabel(min, minLabel)), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        className: sliderClasses,
+        ref: node => {
+          this.element = node;
+        },
+        onMouseDown: this.onDragStart,
+        onTouchStart: this.onDragStart,
+        onKeyDown: this.onKeyDown,
+        role: "presentation",
+        tabIndex: -1,
+        "data-invalid": isValid ? null : true
+      }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: `${prefix}--slider__thumb`,
+        role: "slider",
+        id: id,
+        tabIndex: !readOnly ? 0 : -1,
+        "aria-valuemax": max,
+        "aria-valuemin": min,
+        "aria-valuenow": value,
+        "aria-labelledby": labelId,
+        ref: this.thumbRef
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: `${prefix}--slider__track`,
+        ref: node => {
+          this.track = node;
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: `${prefix}--slider__filled-track`,
+        ref: this.filledTrackRef
+      })), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${prefix}--slider__range-label`
+      }, formatLabel(max, maxLabel)), /*#__PURE__*/React__default["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,
+        disabled: disabled,
+        required: required,
+        min: min,
+        max: max,
+        step: step,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        onKeyUp: this.props.onInputKeyUp,
+        "data-invalid": isValid ? null : true,
+        "aria-invalid": isValid ? undefined : true,
+        readOnly: readOnly
+      })));
+    });
+  }
+
+}
 
 _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
   /**