diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 9880f2a59..977e2ffdf 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -13704,15 +13704,69 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           title="Rotate bar labels"
                                           vizState={Object {}}
                                         >
-                                          <EuiTitle
-                                            size="xxs"
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
                                           >
-                                            <h3
-                                              className="euiTitle euiTitle--xxsmall"
+                                            <EuiTitle
+                                              size="xxs"
                                             >
-                                              Rotate bar labels
-                                            </h3>
-                                          </EuiTitle>
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Rotate bar labels
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of -90 to 90"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
                                           <EuiSpacer
                                             size="s"
                                           >
@@ -14610,15 +14664,69 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           title="Group width"
                                           vizState={Object {}}
                                         >
-                                          <EuiTitle
-                                            size="xxs"
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
                                           >
-                                            <h3
-                                              className="euiTitle euiTitle--xxsmall"
+                                            <EuiTitle
+                                              size="xxs"
                                             >
-                                              Group width
-                                            </h3>
-                                          </EuiTitle>
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Group width
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 1"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
                                           <EuiSpacer
                                             size="s"
                                           >
@@ -14797,15 +14905,69 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           title="Bar width"
                                           vizState={Object {}}
                                         >
-                                          <EuiTitle
-                                            size="xxs"
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
                                           >
-                                            <h3
-                                              className="euiTitle euiTitle--xxsmall"
+                                            <EuiTitle
+                                              size="xxs"
                                             >
-                                              Bar width
-                                            </h3>
-                                          </EuiTitle>
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Bar width
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 1"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
                                           <EuiSpacer
                                             size="s"
                                           >
@@ -14984,15 +15146,69 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           title="Line width"
                                           vizState={Object {}}
                                         >
-                                          <EuiTitle
-                                            size="xxs"
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
                                           >
-                                            <h3
-                                              className="euiTitle euiTitle--xxsmall"
+                                            <EuiTitle
+                                              size="xxs"
                                             >
-                                              Line width
-                                            </h3>
-                                          </EuiTitle>
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Line width
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 10"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
                                           <EuiSpacer
                                             size="s"
                                           >
@@ -15171,15 +15387,69 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           title="Fill opacity"
                                           vizState={Object {}}
                                         >
-                                          <EuiTitle
-                                            size="xxs"
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
                                           >
-                                            <h3
-                                              className="euiTitle euiTitle--xxsmall"
+                                            <EuiTitle
+                                              size="xxs"
                                             >
-                                              Fill opacity
-                                            </h3>
-                                          </EuiTitle>
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Fill opacity
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 100"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
                                           <EuiSpacer
                                             size="s"
                                           >
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
index 93af5808d..5cdd05b11 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
@@ -21,12 +21,18 @@ export const ConfigBarChartStyles = ({
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
 
   const handleConfigurationChange = useCallback(
-    (stateFieldName) => {
+    (stateFieldName, max) => {
       return (changes) => {
-        handleConfigChange({
-          ...vizState,
-          [stateFieldName]: changes,
-        });
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFieldName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
       };
     },
     [handleConfigChange, vizState]
@@ -68,7 +74,7 @@ export const ConfigBarChartStyles = ({
                 label: btn.name,
               })),
               idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-              handleButtonChange: handleConfigurationChange(schema.mapTo),
+              handleButtonChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             return createDimensionComponent(params);
           }
@@ -76,7 +82,7 @@ export const ConfigBarChartStyles = ({
             params = {
               title: schema.name,
               numValue: vizState[schema.mapTo] || '',
-              handleInputChange: handleConfigurationChange(schema.mapTo),
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
               vizState,
               ...schema.props,
             };
@@ -91,7 +97,7 @@ export const ConfigBarChartStyles = ({
               currentRange: vizState[schema.mapTo] || schema?.defaultState,
               ticks: schema?.props?.ticks,
               showTicks: schema?.props?.showTicks || false,
-              handleSliderChange: handleConfigurationChange(schema.mapTo),
+              handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             return createDimensionComponent(params);
           }
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
index ea5cdfe7e..481263b60 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
@@ -22,12 +22,18 @@ export const ConfigChartOptions = ({
   const { data: vizData = {}, metadata: { fields = [] } = {}, tree_map } = data?.rawVizData;
 
   const handleConfigurationChange = useCallback(
-    (stateFiledName) => {
+    (stateFiledName, max) => {
       return (changes) => {
-        handleConfigChange({
-          ...vizState,
-          [stateFiledName]: changes,
-        });
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFiledName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
       };
     },
     [handleConfigChange, vizState]
@@ -60,7 +66,7 @@ export const ConfigChartOptions = ({
               ...params,
               colorPalettes: schema.options || [],
               selectedColor: vizState[schema.mapTo] || schema.defaultState,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -68,7 +74,7 @@ export const ConfigChartOptions = ({
             params = {
               ...params,
               selectedColor: vizState[schema.mapTo] || schema.defaultState,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -77,7 +83,7 @@ export const ConfigChartOptions = ({
               ...params,
               selectedColor: vizState[schema.mapTo] || schema?.defaultState,
               colorPalettes: schema.options || [],
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -89,7 +95,7 @@ export const ConfigChartOptions = ({
               numberOfParents:
                 (tree_map?.dataConfig?.dimensions !== undefined &&
                   tree_map?.dataConfig.dimensions[0].parentFields.length) | 0,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -98,7 +104,7 @@ export const ConfigChartOptions = ({
               ...params,
               currentValue: vizState[schema.mapTo] || '',
               numValue: vizState[schema.mapTo] || '',
-              handleInputChange: handleConfigurationChange(schema.mapTo),
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
               minLimit: schema.props?.hasOwnProperty('minLimit')
                 ? schema.props.minLimit
                 : NUMBER_INPUT_MIN_LIMIT,
@@ -110,7 +116,7 @@ export const ConfigChartOptions = ({
               ...params,
               currentValue: vizState[schema.mapTo] || '',
               name: schema.mapTo,
-              handleInputChange: handleConfigurationChange(schema.mapTo),
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -119,7 +125,7 @@ export const ConfigChartOptions = ({
               ...params,
               maxRange: schema.props.max,
               currentRange: vizState[schema.mapTo] || schema?.defaultState,
-              handleSliderChange: handleConfigurationChange(schema.mapTo),
+              handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -128,7 +134,7 @@ export const ConfigChartOptions = ({
               ...params,
               title: schema.name,
               currentValue: vizState[schema.mapTo],
-              onToggle: handleConfigurationChange(schema.mapTo),
+              onToggle: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -142,7 +148,7 @@ export const ConfigChartOptions = ({
                 label: btn.name,
               })),
               idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-              handleButtonChange: handleConfigurationChange(schema.mapTo),
+              handleButtonChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
             };
             break;
 
@@ -152,7 +158,7 @@ export const ConfigChartOptions = ({
               paddingTitle: schema.name,
               advancedTitle: 'advancedTitle',
               dropdownList: schema?.options || fields,
-              onSelectChange: handleConfigurationChange(schema.mapTo),
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
               isSingleSelection: schema.isSingleSelection,
               selectedAxis: vizState[schema.mapTo] || schema.defaultState,
             };
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
index b753854a1..3cac15469 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
@@ -21,12 +21,18 @@ export const ConfigLineChartStyles = ({
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
 
   const handleConfigurationChange = useCallback(
-    (stateFiledName) => {
+    (stateFiledName, max) => {
       return (changes) => {
-        handleConfigChange({
-          ...vizState,
-          [stateFiledName]: changes,
-        });
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFiledName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
       };
     },
     [handleConfigChange, vizState]
@@ -82,7 +88,7 @@ export const ConfigLineChartStyles = ({
               label: btn.name,
             })),
             idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-            handleButtonChange: handleConfigurationChange(schema.mapTo),
+            handleButtonChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
           };
         } else if (schema.eleType === 'slider') {
           params = {
@@ -93,18 +99,18 @@ export const ConfigLineChartStyles = ({
             currentRange: vizState[schema.mapTo] || schema?.defaultState,
             ticks: schema?.props?.ticks,
             showTicks: schema?.props?.showTicks || false,
-            handleSliderChange: handleConfigurationChange(schema.mapTo),
+            handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
           };
         } else if (schema.eleType === 'input') {
           params = {
             ...params,
             numValue: vizState[schema.mapTo] || '',
-            handleInputChange: handleConfigurationChange(schema.mapTo),
+            handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
           };
         }
         return (
           <Fragment key={`viz-series-${index}`}>
-            <DimensionComponent  {...params} />
+            <DimensionComponent {...params} />
             <EuiSpacer size="s" />
           </Fragment>
         );
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
index 6097073af..870a90ba0 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { EuiFieldText, EuiForm, EuiFormRow, EuiTextArea, EuiAccordion } from '@elastic/eui';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
 import { DEFAULT_GAUGE_CHART_PARAMETERS } from '../../../../../../../../common/constants/explorer';
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx
index b1f9d890b..e260ee294 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx
@@ -4,7 +4,8 @@
  */
 
 import React, { ReactNode } from 'react';
-import { EuiTitle, EuiSpacer, EuiRange, htmlIdGenerator } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, EuiRange, htmlIdGenerator, EuiToolTip, EuiIcon } from '@elastic/eui';
+const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
 
 export interface EuiRangeTick {
   value: number;
@@ -24,6 +25,12 @@ interface Props {
   ) => void;
 }
 
+const rangeToolTip = (message: string) => (
+  <EuiToolTip position="top" content={message} delay="regular" anchorClassName="eui-textTruncate">
+    {tooltipIcon}
+  </EuiToolTip>
+);
+
 export const SliderConfig: React.FC<Props> = ({
   title,
   currentRange,
@@ -35,9 +42,12 @@ export const SliderConfig: React.FC<Props> = ({
   step,
 }) => (
   <>
-    <EuiTitle size="xxs">
-      <h3>{title}</h3>
-    </EuiTitle>
+    <div style={{ display: 'flex' }}>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      {rangeToolTip(`Value must be in the range of ${minRange} to ${maxRange}`)}
+    </div>
     <EuiSpacer size="s" />
     <EuiRange
       aria-label="change lineWidth slider"