@elastic/eui 70.3.0 → 71.0.0

package/es/components/form/range/range.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "style", "tabIndex", "isInvalid"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -42,7 +42,9 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
-import { htmlIdGenerator } from '../../../services/accessibility';
+import { htmlIdGenerator, withEuiTheme } from '../../../services/';
+import { FormContext } from '../eui_form_context';
+import { getLevelColor } from './range_levels_colors';
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
@@ -50,17 +52,17 @@ import { EuiRangeSlider } from './range_slider';
 import { EuiRangeTooltip } from './range_tooltip';
 import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
-import { FormContext } from '../eui_form_context';
+import { euiRangeStyles } from './range.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiRange = /*#__PURE__*/function (_Component) {
-  _inherits(EuiRange, _Component);
+export var EuiRangeClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiRangeClass, _Component);
 
-  var _super = _createSuper(EuiRange);
+  var _super = _createSuper(EuiRangeClass);
 
-  function EuiRange() {
+  function EuiRangeClass() {
     var _this;
 
-    _classCallCheck(this, EuiRange);
+    _classCallCheck(this, EuiRangeClass);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -123,7 +125,7 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(EuiRange, [{
+  _createClass(EuiRangeClass, [{
     key: "isValid",
     get: function get() {
       return isWithinRange(this.props.min, this.props.max, this.props.value || '');
@@ -163,9 +165,9 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
           onChange = _this$props.onChange,
           onFocus = _this$props.onFocus,
           value = _this$props.value,
-          style = _this$props.style,
           tabIndex = _this$props.tabIndex,
           isInvalid = _this$props.isInvalid,
+          theme = _this$props.theme,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
       var id = this.state.id;
@@ -191,12 +193,14 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
         isInvalid: isInvalid,
         autoSize: !showInputOnly
       }, rest)) : null;
-      var classes = classNames('euiRange', {
-        'euiRange--hasInput': showInput
-      }, className);
+      var classes = classNames('euiRange', className);
+      var styles = euiRangeStyles(theme);
+      var cssStyles = [styles.euiRange, showInput && styles.hasInput];
+      var thumbColor = levels && getLevelColor(levels, Number(value));
 
       var theRange = ___EmotionJSX(EuiRangeWrapper, {
         className: classes,
+        css: cssStyles,
         fullWidth: fullWidth,
         compressed: compressed
       }, showLabels && ___EmotionJSX(EuiRangeLabel, {
@@ -214,49 +218,52 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleOnChange,
         value: value,
-        "aria-hidden": showInput === true
-      }, ___EmotionJSX(EuiRangeSlider, _extends({
-        id: showInput ? undefined : id // Attach id only to the input if there is one
-        ,
-        name: name,
-        min: min,
-        max: max,
-        step: step,
-        value: value,
-        disabled: disabled,
-        compressed: compressed,
-        onChange: this.handleOnChange,
-        style: style,
-        showTicks: showTicks,
-        showRange: showRange,
-        tabIndex: showInput ? -1 : tabIndex,
-        onMouseDown: showInputOnly ? function () {
-          return _this2.preventPopoverClose = true;
-        } : undefined,
-        onFocus: showInput === true ? undefined : onFocus,
-        onBlur: showInputOnly ? this.onInputBlur : onBlur,
-        "aria-hidden": showInput === true ? true : false
-      }, rest)), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
-        compressed: compressed,
-        showTicks: showTicks,
-        min: Number(min),
-        max: Number(max),
-        lowerValue: Number(min),
-        upperValue: Number(value)
-      }), showValue && !!String(value).length && ___EmotionJSX(EuiRangeTooltip, {
-        compressed: compressed,
-        value: value,
-        max: max,
-        min: min,
-        name: name,
-        showTicks: showTicks,
-        valuePrepend: valuePrepend,
-        valueAppend: valueAppend
-      })), showLabels && ___EmotionJSX(EuiRangeLabel, {
+        "aria-hidden": showInput === true,
+        showRange: showRange
+      }, function (trackWidth) {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiRangeSlider, _extends({
+          id: showInput ? undefined : id // Attach id only to the input if there is one
+          ,
+          name: name,
+          min: min,
+          max: max,
+          step: step,
+          value: value,
+          disabled: disabled,
+          onChange: _this2.handleOnChange,
+          showTicks: showTicks,
+          showRange: showRange,
+          tabIndex: showInput ? -1 : tabIndex,
+          onMouseDown: showInputOnly ? function () {
+            return _this2.preventPopoverClose = true;
+          } : undefined,
+          onFocus: showInput === true ? undefined : onFocus,
+          onBlur: showInputOnly ? _this2.onInputBlur : onBlur,
+          "aria-hidden": showInput === true ? true : false,
+          thumbColor: thumbColor
+        }, rest)), showRange && _this2.isValid && ___EmotionJSX(EuiRangeHighlight, {
+          showTicks: showTicks,
+          min: Number(min),
+          max: Number(max),
+          lowerValue: Number(min),
+          upperValue: Number(value),
+          levels: levels,
+          trackWidth: trackWidth
+        }), showValue && !!String(value).length && ___EmotionJSX(EuiRangeTooltip, {
+          value: value,
+          max: max,
+          min: min,
+          name: name,
+          showTicks: showTicks,
+          valuePrepend: valuePrepend,
+          valueAppend: valueAppend
+        }));
+      }), showLabels && ___EmotionJSX(EuiRangeLabel, {
         side: "max",
         disabled: disabled
       }, max), showInput && !showInputOnly && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
-        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer'
+        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
+        css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
 
       var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, {
@@ -272,12 +279,12 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return EuiRange;
+  return EuiRangeClass;
 }(Component);
 
-_defineProperty(EuiRange, "contextType", FormContext);
+_defineProperty(EuiRangeClass, "contextType", FormContext);
 
-_defineProperty(EuiRange, "defaultProps", {
+_defineProperty(EuiRangeClass, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
@@ -291,39 +298,79 @@ _defineProperty(EuiRange, "defaultProps", {
   levels: []
 });
 
-EuiRange.propTypes = {
-  compressed: PropTypes.bool,
-  readOnly: PropTypes.bool,
+EuiRangeClass.propTypes = {
+  /**
+     * Shows a tooltip styled value
+     */
+  showValue: PropTypes.bool,
 
   /**
-     * Expand to fill 100% of the parent.
-     * Defaults to `fullWidth` prop of `<EuiForm>`.
-     * @default false
+     * Appends to the tooltip
      */
-  fullWidth: PropTypes.bool,
-  id: PropTypes.string,
+  valueAppend: PropTypes.node,
 
   /**
-     * Create colored indicators for certain intervals
+     * Prepends to the tooltip
      */
-  levels: PropTypes.arrayOf(PropTypes.shape({
-    min: PropTypes.number.isRequired,
-    max: PropTypes.number.isRequired,
+  valuePrepend: PropTypes.node,
 
+  /**
+     * Only impacts the input rendered by the `showInput` prop.
+     * `string` | `ReactElement` or an array of these
+     */
+  prepend: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
+
+  /**
+     * Only impacts the input rendered by the `showInput` prop.
+     * `string` | `ReactElement` or an array of these
+     */
+  append: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
+  value: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]).isRequired,
+  onChange: PropTypes.func,
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
+
+  /**
+     * The number to increment or decrement between each interval
+     * @default 1
+     */
+  step: PropTypes.number,
+
+  /**
+     * Specified ticks at specified values
+     */
+  ticks: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.number.isRequired,
+    label: PropTypes.node.isRequired
+  }).isRequired),
+
+  /**
+     * Modifies the number of tick marks and at what interval
+     */
+  tickInterval: PropTypes.number,
+
+  /**
+     * Create colored indicators for certain intervals.
+     * An array of #EuiRangeLevel objects
+     */
+  levels: PropTypes.arrayOf(PropTypes.shape({
     /**
        * Accepts one of `["primary", "success", "warning", "danger"]` or a valid CSS color value.
        */
-    color: PropTypes.oneOfType([PropTypes.oneOf(["primary", "success", "warning", "danger"]).isRequired, PropTypes.any.isRequired]).isRequired,
+    color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]).isRequired,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any
   }).isRequired),
-  step: PropTypes.number,
 
   /**
      * Pass `true` to displays an extra input control for direct manipulation.
-     * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
+     * Pass `"inputWithPopover"` to only show the input but show the range in a dropdown.
      */
   showInput: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["inputWithPopover"])]),
 
@@ -341,42 +388,40 @@ EuiRange.propTypes = {
      * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
      */
   showTicks: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
 
   /**
-     * Shows a tooltip styled value
+     * Only impacts ticks rendered by `showTicks` or inputs rendered by `showInput`.
      */
-  showValue: PropTypes.bool,
+  compressed: PropTypes.bool,
 
   /**
-     * Specified ticks at specified values
+     * Only impacts inputs rendered by the `showInput` prop.
+     * The range slider itself remains interactable unless `disabled` is applied.
      */
-  ticks: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.number.isRequired,
-    label: PropTypes.node.isRequired
-  }).isRequired),
+  readOnly: PropTypes.bool,
 
   /**
-     * Modifies the number of tick marks and at what interval
+     * Disables both the range track and any input(s)
      */
-  tickInterval: PropTypes.number,
+  disabled: PropTypes.bool,
 
   /**
-     * Appends to the tooltip
+     * Expand to fill 100% of the parent.
+     * Defaults to `fullWidth` prop of `<EuiForm>`.
+     * @default false
      */
-  valueAppend: PropTypes.node,
+  fullWidth: PropTypes.bool,
 
   /**
-     * Prepends to the tooltip
+     * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
-  valuePrepend: PropTypes.node,
+  isLoading: PropTypes.bool,
 
   /**
-     * Will only show if `showInput = inputWithPopover`
+     * Only impacts inputs rendered by the `showInput` prop
      */
-  isLoading: PropTypes.bool,
-  onChange: PropTypes.func,
-  className: PropTypes.string,
-  "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string,
-  css: PropTypes.any
-};
+  isInvalid: PropTypes.bool
+};
+export var EuiRange = withEuiTheme(EuiRangeClass);

package/es/components/form/range/range.styles.js

@@ -0,0 +1,98 @@
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { hexToRgb } from '../../../services';
+import { mathWithUnits } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+export var euiRangeVariables = function euiRangeVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var trackHeight = '6px';
+  var thumbHeight = euiTheme.size.base;
+  var thumbWidth = euiTheme.size.base;
+  var form = euiFormVariables(euiThemeContext);
+  return {
+    trackColor: euiTheme.colors.lightShade,
+    highlightColor: euiTheme.colors.darkShade,
+    focusColor: euiTheme.colors.primary,
+    thumbHeight: thumbHeight,
+    thumbWidth: thumbWidth,
+    thumbBorderWidth: euiTheme.border.width.thick,
+    thumbBorderColor: euiTheme.colors.emptyShade,
+    thumbBackgroundColor: euiTheme.colors.darkShade,
+    // same as highlightColor
+    trackWidth: '100%',
+    trackHeight: trackHeight,
+    trackBorderWidth: '0px',
+    trackBorderColor: euiTheme.colors.lightShade,
+    // same as trackColor
+    trackBorderRadius: euiTheme.border.radius.medium,
+    tickHeight: trackHeight,
+    tickWidth: euiTheme.size.xs,
+    disabledOpacity: 0.5,
+    highlightHeight: trackHeight,
+    height: form.controlHeight,
+    compressedHeight: form.controlCompressedHeight,
+    // position of the track and highlight relative to the parent container
+    trackTopPositionWithTicks: mathWithUnits([thumbHeight, trackHeight], function (x, y) {
+      return (x - y) / 2;
+    }),
+    trackBottomPositionWithTicks: mathWithUnits([thumbHeight, trackHeight], function (x, y) {
+      return x - (x - y) / 2;
+    }),
+    trackTopPositionWithoutTicks: "calc(50% - (".concat(trackHeight, " / 2))"),
+    // Z-indexes
+    levelsZIndex: 1,
+    highlightZIndex: 2,
+    thumbZIndex: 3
+  };
+};
+export var euiRangeTrackPerBrowser = function euiRangeTrackPerBrowser(content) {
+  return "\n    &::-webkit-slider-runnable-track { ".concat(content, "; }\n    &::-moz-range-track { ").concat(content, "; }\n    &::-ms-fill-lower {").concat(content, "; }\n    &::-ms-fill-upper { ").concat(content, "; }\n  ");
+};
+export var euiRangeThumbBorder = function euiRangeThumbBorder(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    border: ".concat(range.thumbBorderWidth, " solid ").concat(range.thumbBorderColor, ";\n  ");
+};
+export var euiRangeThumbBoxShadow = function euiRangeThumbBoxShadow(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var shadowColor = "rgba(".concat(hexToRgb(euiTheme.colors.shadow), ", .2)");
+  var range = euiRangeVariables(euiThemeContext);
+  var borderWidth = range.thumbBorderWidth;
+  var halfBorderWidth = mathWithUnits(borderWidth, function (x) {
+    return x / 2;
+  });
+  var largeBorderWidth = mathWithUnits(borderWidth, function (x) {
+    return x * 2.5;
+  });
+  return "\n    box-shadow:\n      0 0 0 ".concat(halfBorderWidth, " ").concat(range.thumbBorderColor, ",\n      0 ").concat(borderWidth, " ").concat(borderWidth, " -").concat(halfBorderWidth, " ").concat(shadowColor, ",\n      0 ").concat(halfBorderWidth, " ").concat(largeBorderWidth, " -").concat(borderWidth, " ").concat(shadowColor, ";\n  ");
+};
+export var euiRangeThumbFocusBoxShadow = function euiRangeThumbFocusBoxShadow(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    box-shadow: 0 0 0 ".concat(range.thumbBorderWidth, " ").concat(range.focusColor, ";\n  ");
+};
+export var euiRangeThumbStyle = function euiRangeThumbStyle(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
+};
+export var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
+  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb  { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
+};
+export var euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n   ".concat(euiRangeThumbBorder(euiThemeContext), ";\n   ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n   background-color: ").concat(color || range.focusColor, ";\n  ");
+};
+export var euiRangeStyles = function euiRangeStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    // Base
+    euiRange: /*#__PURE__*/css(";label:euiRange;"),
+    hasInput: /*#__PURE__*/css(";label:hasInput;"),
+    euiRange__horizontalSpacer: /*#__PURE__*/css("inline-size:", euiTheme.size.base, ";;label:euiRange__horizontalSpacer;"),
+    euiRange__slimHorizontalSpacer: /*#__PURE__*/css("inline-size:", euiTheme.size.s, ";;label:euiRange__slimHorizontalSpacer;")
+  };
+};

package/es/components/form/range/range_draggable.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "compressed", "onChange", "min", "max", "disabled", "value"];
+var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "onChange", "min", "max", "disabled", "value"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -25,17 +25,18 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useMouseMove } from '../../../services';
+import { useMouseMove, useEuiTheme } from '../../../services';
+import { logicalStyles } from '../../../global_styling';
+import { euiRangeDraggableStyles, euiRangeDraggableInnerStyles } from './range_draggable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
   var className = _ref.className,
       showTicks = _ref.showTicks,
       lowerPosition = _ref.lowerPosition,
       upperPosition = _ref.upperPosition,
-      compressed = _ref.compressed,
       onChange = _ref.onChange,
       min = _ref.min,
       max = _ref.max,
@@ -43,33 +44,36 @@ export var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
       value = _ref.value,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var outerStyle = {
-    left: "calc(".concat(lowerPosition, ")"),
-    right: "calc(100% - ".concat(upperPosition, " - 16px)")
-  };
-  var classes = classNames('euiRangeDraggable', {
-    'euiRangeDraggable--hasTicks': showTicks,
-    'euiRangeDraggable--compressed': compressed,
-    'euiRangeDraggable--disabled': disabled
-  }, className);
-
-  var handleChange = function handleChange(_ref2, isFirstInteraction) {
+  var euiTheme = useEuiTheme();
+  var outerStyle = useMemo(function () {
+    return logicalStyles({
+      left: lowerPosition,
+      right: "calc(100% - ".concat(upperPosition, " - ").concat(euiTheme.euiTheme.size.base, ")")
+    });
+  }, [lowerPosition, upperPosition, euiTheme.euiTheme.size.base]);
+  var handleChange = useCallback(function (_ref2, isFirstInteraction) {
     var x = _ref2.x;
     if (disabled) return;
     onChange(x, isFirstInteraction);
-  };
+  }, [disabled, onChange]);
 
   var _useMouseMove = useMouseMove(handleChange),
       _useMouseMove2 = _slicedToArray(_useMouseMove, 2),
       handleMouseDown = _useMouseMove2[0],
       handleInteraction = _useMouseMove2[1];
 
+  var classes = classNames('euiRangeDraggable', className);
+  var styles = euiRangeDraggableStyles(euiTheme);
+  var cssStyles = [styles.euiRangeDraggable, showTicks && styles.hasTicks, disabled && styles.disabled];
+  var innerStyles = euiRangeDraggableInnerStyles(euiTheme);
+  var cssInnerStyles = [innerStyles.euiRangeDraggable__inner, disabled ? styles.disabled : innerStyles.enabled];
   var commonProps = {
     className: classes,
+    css: cssStyles,
     role: 'slider',
     'aria-valuemin': min,
     'aria-valuemax': max,
-    'aria-valuenow': value[0],
+    'aria-valuenow': Number(value[0]),
     'aria-valuetext': "".concat(value[0], ", ").concat(value[1]),
     'aria-disabled': !!disabled,
     tabIndex: !!disabled ? -1 : 0
@@ -77,19 +81,14 @@ export var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
   return ___EmotionJSX("div", _extends({
     style: outerStyle
   }, commonProps, rest), ___EmotionJSX("div", {
-    className: "euiRangeDraggle__inner",
+    className: "euiRangeDraggable__inner",
+    css: cssInnerStyles,
     onMouseDown: handleMouseDown,
     onTouchStart: handleInteraction,
     onTouchMove: handleInteraction
   }));
 };
 EuiRangeDraggable.propTypes = {
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  value: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
-  disabled: PropTypes.bool,
-  compressed: PropTypes.bool,
-  showTicks: PropTypes.bool,
   lowerPosition: PropTypes.string.isRequired,
   upperPosition: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired

package/es/components/form/range/range_draggable.styles.js

@@ -0,0 +1,52 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { mathWithUnits } from '../../../global_styling';
+import { euiRangeVariables, euiRangeThumbFocus } from './range.styles';
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "bpru7n-hasTicks",
+  styles: "inset-block-start:0;label:hasTicks;"
+} : {
+  name: "bpru7n-hasTicks",
+  styles: "inset-block-start:0;label:hasTicks;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiRangeDraggableStyles = function euiRangeDraggableStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeDraggable: /*#__PURE__*/css("block-size:", mathWithUnits(range.height, function (x) {
+      return x / 2;
+    }), ";position:absolute;inset-block-start:", mathWithUnits(range.height, function (x) {
+      return x / 4;
+    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{outline:none;~.euiRangeThumb{", euiRangeThumbFocus(euiThemeContext), ";}};label:euiRangeDraggable;"),
+    hasTicks: _ref2,
+    disabled: /*#__PURE__*/css(";label:disabled;")
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ndov1k-enabled",
+  styles: "cursor:grab;pointer-events:all;&:active{cursor:grabbing;};label:enabled;"
+} : {
+  name: "ndov1k-enabled",
+  styles: "cursor:grab;pointer-events:all;&:active{cursor:grabbing;};label:enabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiRangeDraggableInnerStyles = function euiRangeDraggableInnerStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeDraggable__inner: /*#__PURE__*/css("position:absolute;inset-inline:", range.thumbWidth, ";inset-block:0;;label:euiRangeDraggable__inner;"),
+    enabled: _ref,
+    disabled: /*#__PURE__*/css(";label:disabled;")
+  };
+};