@elastic/eui 70.3.0 → 71.0.0

package/optimize/lib/components/form/range/dual_range.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiDualRange = void 0;
+exports.EuiDualRangeClass = exports.EuiDualRange = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,19 +29,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _react2 = require("@emotion/react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _services = require("../../../services");
 
 var _number = require("../../../services/number");
 
+var _global_styling = require("../../../global_styling");
+
 var _popover = require("../../popover");
 
 var _form_control_layout = require("../form_control_layout");
 
-var _accessibility = require("../../../services/accessibility");
+var _eui_form_context = require("../eui_form_context");
 
 var _range_draggable = require("./range_draggable");
 
@@ -51,6 +51,8 @@ var _range_input = require("./range_input");
 
 var _range_label = require("./range_label");
 
+var _range_levels_colors = require("./range_levels_colors");
+
 var _range_slider = require("./range_slider");
 
 var _range_thumb = require("./range_thumb");
@@ -61,27 +63,35 @@ var _range_wrapper = require("./range_wrapper");
 
 var _utils = require("./utils");
 
-var _eui_form_context = require("../eui_form_context");
+var _range = require("./range.styles");
 
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "style", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable"];
+var _dual_range = require("./dual_range.styles");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var EuiDualRange = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiDualRange, _Component);
+var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EuiDualRangeClass, _Component);
 
-  var _super = _createSuper(EuiDualRange);
+  var _super = _createSuper(EuiDualRangeClass);
 
-  function EuiDualRange() {
+  function EuiDualRangeClass() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, EuiDualRange);
+    (0, _classCallCheck2.default)(this, EuiDualRangeClass);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -89,8 +99,7 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      id: _this.props.id || (0, _accessibility.htmlIdGenerator)()(),
-      hasFocus: false,
+      id: _this.props.id || (0, _services.htmlIdGenerator)()(),
       rangeSliderRefAvailable: false,
       isPopoverOpen: false,
       rangeWidth: undefined,
@@ -113,15 +122,16 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
       // If the values are invalid, find whether the new value is in the upper
       // or lower half and move the appropriate handle to the new value,
       // while the other handle gets moved to the opposite bound (if invalid)
-      var lowerHalf = Math.abs(_this.props.max - _this.props.min) / 2 + _this.props.min;
-
-      var newValIsLow = (0, _number.isWithinRange)(_this.props.min, lowerHalf, newVal);
+      var min = _this.props.min;
+      var max = _this.props.max;
+      var lowerHalf = Math.abs(max - min) / 2 + min;
+      var newValIsLow = (0, _number.isWithinRange)(min, lowerHalf, newVal);
 
       if (newValIsLow) {
         lower = newVal;
-        upper = !_this.upperValueIsValid ? _this.props.max : upper;
+        upper = !_this.upperValueIsValid ? max : upper;
       } else {
-        lower = !_this.lowerValueIsValid ? _this.props.min : lower;
+        lower = !_this.lowerValueIsValid ? min : lower;
         upper = newVal;
       }
 
@@ -181,13 +191,14 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
       var newVal = Number(value);
       var stepRemainder = 0;
       var step = _this.props.step || 1;
+      var min = _this.props.min;
 
       switch (event.key) {
         case _services.keys.ARROW_UP:
         case _services.keys.ARROW_RIGHT:
           event.preventDefault();
           newVal += step;
-          stepRemainder = (newVal - _this.props.min) % step;
+          stepRemainder = (newVal - min) % step;
 
           if (step !== 1 && stepRemainder > 0) {
             newVal = newVal - stepRemainder;
@@ -199,7 +210,7 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
         case _services.keys.ARROW_LEFT:
           event.preventDefault();
           newVal -= step;
-          stepRemainder = (newVal - _this.props.min) % step;
+          stepRemainder = (newVal - min) % step;
 
           if (step !== 1 && stepRemainder > 0) {
             newVal = newVal + (step - stepRemainder);
@@ -283,26 +294,15 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
         left: "".concat(position, "%")
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleHasFocus", function () {
-      var shouldFocused = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !_this.state.hasFocus;
-
-      _this.setState({
-        hasFocus: shouldFocused
-      });
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onThumbFocus", function (e) {
       if (_this.props.onFocus) {
         _this.props.onFocus(e);
       }
-
-      _this.toggleHasFocus(true);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onThumbBlur", function (e) {
       if (_this.props.onBlur) {
         _this.props.onBlur(e);
       }
-
-      _this.toggleHasFocus(false);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputFocus", function (e) {
       if (_this.props.onFocus) {
@@ -346,10 +346,12 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNearestStep", function (value) {
+      var min = _this.props.min;
+      var max = _this.props.max;
       var steps = (_this.props.max - _this.props.min) / _this.props.step;
-      var approx = Math.round((value - _this.props.min) * steps / (_this.props.max - _this.props.min)) / steps;
+      var approx = Math.round((value - min) * steps / (max - min)) / steps;
       var bound = Math.min(Math.max(approx, 0), 1);
-      var nearest = bound * (_this.props.max - _this.props.min) + _this.props.min;
+      var nearest = bound * (max - min) + min;
       return Number(nearest.toPrecision(10)) * 100 / 100;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDrag", function (x, isFirstInteraction) {
@@ -358,9 +360,8 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
         _this.dragAcc = 0;
       }
 
-      var _this$props = _this.props,
-          min = _this$props.min,
-          max = _this$props.max;
+      var min = _this.props.min;
+      var max = _this.props.max;
       var lowerValue = Number(_this.lowerValue);
       var upperValue = Number(_this.upperValue);
       var delta = _this.leftPosition - x;
@@ -386,7 +387,7 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(EuiDualRange, [{
+  (0, _createClass2.default)(EuiDualRangeClass, [{
     key: "lowerValue",
     get: function get() {
       return this.props.value ? this.props.value[0] : this.props.min;
@@ -444,43 +445,46 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
 
       var _ref = this.context,
           defaultFullWidth = _ref.defaultFullWidth;
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          customCss = _this$props2.css,
-          compressed = _this$props2.compressed,
-          disabled = _this$props2.disabled,
-          _this$props2$fullWidt = _this$props2.fullWidth,
-          fullWidth = _this$props2$fullWidt === void 0 ? defaultFullWidth : _this$props2$fullWidt,
-          isLoading = _this$props2.isLoading,
-          readOnly = _this$props2.readOnly,
-          propsId = _this$props2.id,
-          max = _this$props2.max,
-          min = _this$props2.min,
-          name = _this$props2.name,
-          step = _this$props2.step,
-          showLabels = _this$props2.showLabels,
-          showInput = _this$props2.showInput,
-          showTicks = _this$props2.showTicks,
-          tickInterval = _this$props2.tickInterval,
-          ticks = _this$props2.ticks,
-          levels = _this$props2.levels,
-          onBlur = _this$props2.onBlur,
-          onChange = _this$props2.onChange,
-          onFocus = _this$props2.onFocus,
-          showRange = _this$props2.showRange,
-          value = _this$props2.value,
-          style = _this$props2.style,
-          isInvalid = _this$props2.isInvalid,
-          append = _this$props2.append,
-          prepend = _this$props2.prepend,
-          minInputProps = _this$props2.minInputProps,
-          maxInputProps = _this$props2.maxInputProps,
-          isDraggable = _this$props2.isDraggable,
-          rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+      var _this$props = this.props,
+          className = _this$props.className,
+          customCss = _this$props.css,
+          compressed = _this$props.compressed,
+          disabled = _this$props.disabled,
+          _this$props$fullWidth = _this$props.fullWidth,
+          fullWidth = _this$props$fullWidth === void 0 ? defaultFullWidth : _this$props$fullWidth,
+          isLoading = _this$props.isLoading,
+          readOnly = _this$props.readOnly,
+          propsId = _this$props.id,
+          maxProps = _this$props.max,
+          minProps = _this$props.min,
+          name = _this$props.name,
+          step = _this$props.step,
+          showLabels = _this$props.showLabels,
+          showInput = _this$props.showInput,
+          showTicks = _this$props.showTicks,
+          tickInterval = _this$props.tickInterval,
+          ticks = _this$props.ticks,
+          levels = _this$props.levels,
+          onBlur = _this$props.onBlur,
+          onChange = _this$props.onChange,
+          onFocus = _this$props.onFocus,
+          showRange = _this$props.showRange,
+          value = _this$props.value,
+          isInvalid = _this$props.isInvalid,
+          append = _this$props.append,
+          prepend = _this$props.prepend,
+          minInputProps = _this$props.minInputProps,
+          maxInputProps = _this$props.maxInputProps,
+          isDraggable = _this$props.isDraggable,
+          theme = _this$props.theme,
+          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var min = minProps;
+      var max = maxProps;
       var id = this.state.id;
       var digitTolerance = Math.max(String(min).length, String(max).length);
       var showInputOnly = showInput === 'inputWithPopover';
       var canShowDropdown = showInputOnly && !readOnly && !disabled;
+      var rangeStyles = (0, _range.euiRangeStyles)(theme);
       var minInput = !!showInput ? (0, _react2.jsx)(_range_input.EuiRangeInput // Overridable props
       , (0, _extends2.default)({
         "aria-describedby": this.props['aria-describedby'],
@@ -538,24 +542,30 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
         } : undefined
       })) : undefined;
       var classes = (0, _classnames.default)('euiDualRange', className);
+      var dualRangeStyles = (0, _dual_range.euiDualRangeStyles)();
+      var cssStyles = [dualRangeStyles.euiDualRange, customCss];
       var leftThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
         left: '0'
       };
       var rightThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
         left: '0'
       };
-      var styles = {
-        euiDualRange: /*#__PURE__*/(0, _react2.css)(";label:euiDualRange;")
-      }; // TODO: Emotion conversion
-
-      var cssStyles = [styles.euiDualRange, customCss];
+      var leftThumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(this.lowerValue));
+      var rightThumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(this.upperValue));
+      var leftThumbStyles = leftThumbColor ? _objectSpread(_objectSpread({}, leftThumbPosition), {}, {
+        backgroundColor: (0, _range_levels_colors.euiRangeLevelColor)(leftThumbColor, theme.euiTheme)
+      }) : leftThumbPosition;
+      var rightThumbStyles = rightThumbColor ? _objectSpread(_objectSpread({}, rightThumbPosition), {}, {
+        backgroundColor: (0, _range_levels_colors.euiRangeLevelColor)(rightThumbColor, theme.euiTheme)
+      }) : rightThumbPosition;
       var theRange = (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, {
         css: cssStyles,
         className: classes,
         fullWidth: fullWidth,
         compressed: compressed
       }, showInput && !showInputOnly && (0, _react2.jsx)(_react.default.Fragment, null, minInput, (0, _react2.jsx)("div", {
-        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer'
+        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
+        css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       })), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
         side: "min",
         disabled: disabled
@@ -571,79 +581,80 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleSliderChange,
         value: value,
-        "aria-hidden": showInput === true
-      }, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
-        className: "euiDualRange__slider",
-        ref: this.handleRangeSliderRefUpdate,
-        id: id,
-        name: name,
-        min: min,
-        max: max,
-        step: step,
-        disabled: disabled,
-        compressed: compressed,
-        onChange: this.handleSliderChange,
-        style: style,
-        showTicks: showTicks,
-        hasFocus: this.state.hasFocus,
-        "aria-hidden": true,
-        tabIndex: -1,
-        showRange: showRange,
-        onFocus: onFocus,
-        onBlur: onBlur
-      }, rest)), showRange && this.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
-        compressed: compressed,
-        hasFocus: this.state.hasFocus,
-        showTicks: showTicks,
-        min: Number(min),
-        max: Number(max),
-        lowerValue: Number(this.lowerValue),
-        upperValue: Number(this.upperValue)
-      }), this.state.rangeSliderRefAvailable && (0, _react2.jsx)(_react.default.Fragment, null, isDraggable && this.isValid && (0, _react2.jsx)(_range_draggable.EuiRangeDraggable, {
-        min: min,
-        max: max,
-        value: [Number(this.lowerValue), Number(this.upperValue)],
-        disabled: disabled,
-        lowerPosition: leftThumbPosition.left,
-        upperPosition: rightThumbPosition.left,
-        showTicks: showTicks,
-        compressed: compressed,
-        onChange: this.handleDrag,
-        onFocus: this.onThumbFocus,
-        onBlur: this.onThumbBlur,
-        onKeyDown: this.handleDraggableKeyDown,
-        "aria-describedby": this.props['aria-describedby'],
-        "aria-label": this.props['aria-label']
-      }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
-        min: min,
-        max: Number(this.upperValue),
-        value: this.lowerValue,
-        disabled: disabled,
-        showTicks: showTicks,
-        showInput: !!showInput,
-        onKeyDown: this.handleLowerKeyDown,
-        onFocus: this.onThumbFocus,
-        onBlur: this.onThumbBlur,
-        style: leftThumbPosition,
-        "aria-describedby": this.props['aria-describedby'],
-        "aria-label": this.props['aria-label']
-      }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
-        min: Number(this.lowerValue),
-        max: max,
-        value: this.upperValue,
-        disabled: disabled,
-        showTicks: showTicks,
-        showInput: !!showInput,
-        onKeyDown: this.handleUpperKeyDown,
-        onFocus: this.onThumbFocus,
-        onBlur: this.onThumbBlur,
-        style: rightThumbPosition,
-        "aria-describedby": this.props['aria-describedby'],
-        "aria-label": this.props['aria-label']
-      }))), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
+        "aria-hidden": showInput === true,
+        showRange: showRange
+      }, function (trackWidth) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
+          className: "euiDualRange__slider",
+          css: dualRangeStyles.euiDualRange__slider,
+          ref: _this2.handleRangeSliderRefUpdate,
+          id: id,
+          name: name,
+          min: min,
+          max: max,
+          step: step,
+          disabled: disabled,
+          onChange: _this2.handleSliderChange,
+          showTicks: showTicks,
+          "aria-hidden": true,
+          tabIndex: -1,
+          showRange: showRange,
+          onFocus: onFocus,
+          onBlur: onBlur
+        }, rest)), _this2.state.rangeSliderRefAvailable && (0, _react2.jsx)(_react.default.Fragment, null, isDraggable && _this2.isValid && (0, _react2.jsx)(_range_draggable.EuiRangeDraggable, {
+          min: min,
+          max: max,
+          value: [_this2.lowerValue, _this2.upperValue],
+          disabled: disabled,
+          lowerPosition: leftThumbPosition.left,
+          upperPosition: rightThumbPosition.left,
+          showTicks: showTicks,
+          onChange: _this2.handleDrag,
+          onFocus: _this2.onThumbFocus,
+          onBlur: _this2.onThumbBlur,
+          onKeyDown: _this2.handleDraggableKeyDown,
+          "aria-describedby": _this2.props['aria-describedby'],
+          "aria-label": _this2.props['aria-label']
+        }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
+          min: min,
+          max: Number(_this2.upperValue),
+          value: _this2.lowerValue,
+          disabled: disabled,
+          showTicks: showTicks,
+          showInput: !!showInput,
+          onKeyDown: _this2.handleLowerKeyDown,
+          onFocus: _this2.onThumbFocus,
+          onBlur: _this2.onThumbBlur,
+          style: (0, _global_styling.logicalStyles)(leftThumbStyles),
+          "aria-describedby": _this2.props['aria-describedby'],
+          "aria-label": _this2.props['aria-label']
+        }), (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
+          min: Number(_this2.lowerValue),
+          max: max,
+          value: _this2.upperValue,
+          disabled: disabled,
+          showTicks: showTicks,
+          showInput: !!showInput,
+          onKeyDown: _this2.handleUpperKeyDown,
+          onFocus: _this2.onThumbFocus,
+          onBlur: _this2.onThumbBlur,
+          style: (0, _global_styling.logicalStyles)(rightThumbStyles),
+          "aria-describedby": _this2.props['aria-describedby'],
+          "aria-label": _this2.props['aria-label']
+        })), showRange && _this2.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
+          showTicks: showTicks,
+          min: Number(min),
+          max: Number(max),
+          lowerValue: Number(_this2.lowerValue),
+          upperValue: Number(_this2.upperValue),
+          levels: levels,
+          trackWidth: trackWidth
+        }));
+      }), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
         disabled: disabled
       }, max), showInput && !showInputOnly && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
-        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer'
+        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
+        css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
       var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
         className: "euiRange__popover",
@@ -667,12 +678,12 @@ var EuiDualRange = /*#__PURE__*/function (_Component) {
       return thePopover || theRange;
     }
   }]);
-  return EuiDualRange;
+  return EuiDualRangeClass;
 }(_react.Component);
 
-exports.EuiDualRange = EuiDualRange;
-(0, _defineProperty2.default)(EuiDualRange, "contextType", _eui_form_context.FormContext);
-(0, _defineProperty2.default)(EuiDualRange, "defaultProps", {
+exports.EuiDualRangeClass = EuiDualRangeClass;
+(0, _defineProperty2.default)(EuiDualRangeClass, "contextType", _eui_form_context.FormContext);
+(0, _defineProperty2.default)(EuiDualRangeClass, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
@@ -683,4 +694,6 @@ exports.EuiDualRange = EuiDualRange;
   showRange: true,
   showTicks: false,
   levels: []
-});
+});
+var EuiDualRange = (0, _services.withEuiTheme)(EuiDualRangeClass);
+exports.EuiDualRange = EuiDualRange;

package/optimize/lib/components/form/range/dual_range.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDualRangeStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _range = require("./range.styles");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiDualRangeStyles = function euiDualRangeStyles() {
+  return {
+    euiDualRange: /*#__PURE__*/(0, _react.css)(";label:euiDualRange;"),
+    euiDualRange__slider: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbPerBrowser)('visibility: hidden'), ";;label:euiDualRange__slider;")
+  };
+};
+
+exports.euiDualRangeStyles = euiDualRangeStyles;