diff --git a/src/platform/packages/shared/kbn-esql-utils/index.ts b/src/platform/packages/shared/kbn-esql-utils/index.ts
index 11ab5d427e874..e9ea6024b7e2b 100644
--- a/src/platform/packages/shared/kbn-esql-utils/index.ts
+++ b/src/platform/packages/shared/kbn-esql-utils/index.ts
@@ -102,6 +102,7 @@ export {
   isSingleSource,
   type ESQLSourceKind,
   ensureApproximationLicense,
+  ESQLValuesPreview,
 } from './src';
 
 export { ENABLE_ESQL, GROUP_NOT_SET_VALUE } from './constants';
diff --git a/src/platform/packages/shared/kbn-esql-utils/moon.yml b/src/platform/packages/shared/kbn-esql-utils/moon.yml
index cd96fa931848a..0f73f9110f0c3 100644
--- a/src/platform/packages/shared/kbn-esql-utils/moon.yml
+++ b/src/platform/packages/shared/kbn-esql-utils/moon.yml
@@ -24,9 +24,11 @@ dependsOn:
   - '@kbn/esql-types'
   - '@kbn/search-types'
   - '@kbn/expressions-plugin'
+  - '@kbn/field-formats-common'
   - '@kbn/field-types'
   - '@kbn/es-types'
   - '@kbn/i18n'
+  - '@kbn/i18n-react'
   - '@kbn/datemath'
   - '@kbn/es-query'
   - '@kbn/code-editor'
diff --git a/src/platform/packages/shared/kbn-esql-utils/src/index.ts b/src/platform/packages/shared/kbn-esql-utils/src/index.ts
index b42c7eece7eed..7dd92446c3b29 100644
--- a/src/platform/packages/shared/kbn-esql-utils/src/index.ts
+++ b/src/platform/packages/shared/kbn-esql-utils/src/index.ts
@@ -110,3 +110,5 @@ export { injectWhereClauseAfterSourceCommand } from './utils/inject_where_after_
 export * from './utils/callbacks';
 
 export { ensureApproximationLicense } from './utils/ensure_approximation_license';
+
+export { ESQLValuesPreview } from './utils/controls/esql_values_preview';
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/choose_column_popover.test.tsx b/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/choose_column_popover.test.tsx
similarity index 100%
rename from src/platform/plugins/shared/controls/public/controls/data_controls/editor/choose_column_popover.test.tsx
rename to src/platform/packages/shared/kbn-esql-utils/src/utils/controls/choose_column_popover.test.tsx
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/choose_column_popover.tsx b/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/choose_column_popover.tsx
similarity index 69%
rename from src/platform/plugins/shared/controls/public/controls/data_controls/editor/choose_column_popover.tsx
rename to src/platform/packages/shared/kbn-esql-utils/src/utils/controls/choose_column_popover.tsx
index 304283f558291..3cc594bc9f122 100644
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/choose_column_popover.tsx
+++ b/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/choose_column_popover.tsx
@@ -10,9 +10,12 @@
 import React, { useCallback, useState } from 'react';
 import type { EuiSelectableOption } from '@elastic/eui';
 import { EuiButtonEmpty, EuiPopover, EuiSelectable } from '@elastic/eui';
-import { css } from '@emotion/react';
 import type { ESQLColumn } from '@kbn/es-types';
-import { DataControlEditorStrings } from '../data_control_constants';
+import { i18n } from '@kbn/i18n';
+
+const SELECT_COLUMN_LABEL = i18n.translate('esqlUtils.valuesPreview.selectAColumnText', {
+  defaultMessage: 'Select a column',
+});
 
 export function ChooseColumnPopover({
   columns,
@@ -26,25 +29,9 @@ export function ChooseColumnPopover({
     columns.map((column) => ({ label: column.name }))
   );
 
-  const onButtonClick = () => setIsPopoverOpen((status) => !status);
-  const closePopover = () => setIsPopoverOpen(false);
-
-  const button = (
-    <EuiButtonEmpty
-      css={css`
-        vertical-align: top;
-      `}
-      onClick={onButtonClick}
-      data-test-subj="chooseColumnBtn"
-    >
-      {DataControlEditorStrings.manageControl.dataSource.valuesPreview.getSelectAColumnText()}
-    </EuiButtonEmpty>
-  );
-
   const onColumnChange = useCallback(
     (newOptions: EuiSelectableOption[]) => {
       setOptions(newOptions);
-
       const selectedColumn = newOptions.find((option) => option.checked === 'on');
       if (selectedColumn) {
         updateQuery(selectedColumn.label);
@@ -53,22 +40,30 @@ export function ChooseColumnPopover({
     [updateQuery]
   );
 
+  const button = (
+    <EuiButtonEmpty
+      style={{ verticalAlign: 'top' }}
+      onClick={() => setIsPopoverOpen((status) => !status)}
+      data-test-subj="chooseColumnBtn"
+    >
+      {SELECT_COLUMN_LABEL}
+    </EuiButtonEmpty>
+  );
+
   return (
     <EuiPopover
-      aria-label={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getColumnsListLabel()}
+      aria-label={i18n.translate('esqlUtils.valuesPreview.columnsListLabel', {
+        defaultMessage: 'Columns',
+      })}
       button={button}
       isOpen={isPopoverOpen}
-      closePopover={closePopover}
+      closePopover={() => setIsPopoverOpen(false)}
     >
       <EuiSelectable
-        aria-label={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getSelectAColumnText()}
+        aria-label={SELECT_COLUMN_LABEL}
         searchable
-        searchProps={{
-          'data-test-subj': 'selectableColumnSearch',
-        }}
-        listProps={{
-          'data-test-subj': 'selectableColumnList',
-        }}
+        searchProps={{ 'data-test-subj': 'selectableColumnSearch' }}
+        listProps={{ 'data-test-subj': 'selectableColumnList' }}
         singleSelection="always"
         options={options}
         onChange={onColumnChange}
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/esql_values_preview.test.tsx b/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/esql_values_preview.test.tsx
similarity index 75%
rename from src/platform/plugins/shared/controls/public/controls/data_controls/editor/esql_values_preview.test.tsx
rename to src/platform/packages/shared/kbn-esql-utils/src/utils/controls/esql_values_preview.test.tsx
index 7798964ca5cff..82db248213204 100644
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/esql_values_preview.test.tsx
+++ b/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/esql_values_preview.test.tsx
@@ -15,22 +15,20 @@ import { ESQLValuesPreview } from './esql_values_preview';
 
 const noopProps = {
   updateQuery: jest.fn(),
-  isQueryRunning: false,
-  queryNeedsRunning: false,
-  dataSource: 'index',
 };
 
 const numericColumn: ESQLColumn = { name: 'bytes', type: 'long' };
 const stringColumn: ESQLColumn = { name: 'os', type: 'keyword' };
 
 describe('ESQLValuesPreview', () => {
-  it('renders min/max stats for numeric columns', () => {
+  it('renders min/max stats for numeric columns when control type is range slider', () => {
     const { getByText, getByTestId } = render(
       <I18nProvider>
         <ESQLValuesPreview
           {...noopProps}
-          previewOptions={[6, 7, 67]}
-          previewColumns={[numericColumn]}
+          values={[6, 7, 67]}
+          columns={[numericColumn]}
+          isRangeControl={true}
         />
       </I18nProvider>
     );
@@ -39,12 +37,29 @@ describe('ESQLValuesPreview', () => {
     expect(getByText('6')).toBeInTheDocument();
     expect(getByText('67')).toBeInTheDocument();
   });
+
+  it('renders a list of values for numeric columns when control type is options list', () => {
+    const { getByTestId, queryByTestId } = render(
+      <I18nProvider>
+        <ESQLValuesPreview
+          {...noopProps}
+          values={[6, 7, 67]}
+          columns={[numericColumn]}
+          isRangeControl={false}
+        />
+      </I18nProvider>
+    );
+
+    expect(queryByTestId('esqlValuesPreviewRange')).not.toBeInTheDocument();
+    expect(getByTestId('esqlValuesPreviewStrings')).toBeInTheDocument();
+  });
+
   it('renders a list of values for string columns', () => {
     const { getByTestId } = render(
       <I18nProvider>
         <ESQLValuesPreview
           {...noopProps}
-          previewOptions={[
+          values={[
             'some',
             'BODY',
             'once',
@@ -66,7 +81,7 @@ describe('ESQLValuesPreview', () => {
             'on her fore',
             'head',
           ]}
-          previewColumns={[stringColumn]}
+          columns={[stringColumn]}
         />
       </I18nProvider>
     );
@@ -77,11 +92,7 @@ describe('ESQLValuesPreview', () => {
   it('shows the column picker when the query returns multiple columns', () => {
     const { getByText, getByTestId } = render(
       <I18nProvider>
-        <ESQLValuesPreview
-          {...noopProps}
-          previewOptions={[]}
-          previewColumns={[numericColumn, stringColumn]}
-        />
+        <ESQLValuesPreview {...noopProps} values={[]} columns={[numericColumn, stringColumn]} />
       </I18nProvider>
     );
 
diff --git a/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/esql_values_preview.tsx b/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/esql_values_preview.tsx
new file mode 100644
index 0000000000000..73e7c30d5f6b6
--- /dev/null
+++ b/src/platform/packages/shared/kbn-esql-utils/src/utils/controls/esql_values_preview.tsx
@@ -0,0 +1,135 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useMemo } from 'react';
+import { EuiBadge, EuiBadgeGroup, EuiCode, EuiFlexGrid, EuiStat } from '@elastic/eui';
+import { max, min } from 'lodash';
+import type { ESQLColumn } from '@kbn/es-types';
+import { isNumericType } from '@kbn/esql-language';
+import { EMPTY_LABEL } from '@kbn/field-formats-common';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+// eslint-disable-next-line @kbn/imports/no_boundary_crossing
+import { KbnDangerCallout, KbnWarningCallout } from '@kbn/ui-callout';
+import { ChooseColumnPopover } from './choose_column_popover';
+
+export const ESQLValuesPreview: React.FC<{
+  // The raw values returned by the query — shown as badges or a range stat
+  values: string[] | number[];
+  // Columns returned by the query — used to detect multi-column errors and determine value type
+  columns: ESQLColumn[];
+  // Query execution error; when set, renders an error callout instead of values
+  error?: Error;
+  updateQuery: (column: string) => void;
+  // When true and the column is numeric, renders a min/max range stat instead of badges
+  isRangeControl?: boolean;
+}> = ({ values, error, columns, updateQuery, isRangeControl }) => {
+  const range = useMemo(() => {
+    if (!isRangeControl || !isNumericType(columns?.[0]?.type)) return;
+
+    const valuesAsNumbers = values.map((v) => Number(v));
+    return { min: min(valuesAsNumbers), max: max(valuesAsNumbers) };
+  }, [values, isRangeControl, columns]);
+
+  if (error) {
+    return (
+      <KbnDangerCallout
+        announceOnMount
+        title={i18n.translate('esqlUtils.valuesPreview.errorTitle', {
+          defaultMessage: 'Error getting values preview',
+        })}
+        size="s"
+        text={error.message}
+      />
+    );
+  }
+
+  if (columns.length > 1) {
+    return (
+      <KbnWarningCallout
+        announceOnMount
+        title={i18n.translate('esqlUtils.valuesPreview.multiColumnErrorTitle', {
+          defaultMessage: 'Query must return a single column',
+        })}
+        size="s"
+        data-test-subj="esqlMoreThanOneColumnCallout"
+        text={
+          <FormattedMessage
+            id="esqlUtils.valuesPreview.multiColumnErrorBody"
+            defaultMessage="Your query is currently returning {totalColumns} columns. Choose a column, or use {statsBy} to narrow your query down."
+            values={{
+              totalColumns: columns.length,
+              statsBy: <EuiCode>STATS BY</EuiCode>,
+            }}
+          />
+        }
+      >
+        <ChooseColumnPopover columns={columns} updateQuery={updateQuery} />
+      </KbnWarningCallout>
+    );
+  }
+
+  if (values.length === 0) {
+    return (
+      <KbnWarningCallout
+        announceOnMount
+        title={i18n.translate('esqlUtils.valuesPreview.emptyTitle', {
+          defaultMessage: 'No values returned',
+        })}
+        size="s"
+        data-test-subj="esqlNoValuesForControlCallout"
+        text={i18n.translate('esqlUtils.valuesPreview.emptyText', {
+          defaultMessage: "This query isn't returning any values. Edit it and run it again.",
+        })}
+      />
+    );
+  }
+
+  if (range) {
+    return (
+      <EuiFlexGrid columns={2} data-test-subj="esqlValuesPreviewRange">
+        <EuiStat
+          titleSize="s"
+          title={range.min}
+          description={i18n.translate('esqlUtils.valuesPreview.minText', {
+            defaultMessage: 'Minimum value',
+          })}
+        />
+        <EuiStat
+          titleSize="s"
+          title={range.max}
+          description={i18n.translate('esqlUtils.valuesPreview.maxText', {
+            defaultMessage: 'Maximum value',
+          })}
+        />
+      </EuiFlexGrid>
+    );
+  }
+
+  const visibleOptions = values.slice(0, 10);
+  const hiddenCount = values.length - visibleOptions.length;
+
+  return (
+    <div>
+      <EuiBadgeGroup data-test-subj="esqlValuesPreviewStrings">
+        {visibleOptions.map((option, i) => (
+          <EuiBadge key={`${i}-${option}`}>{option === '' ? EMPTY_LABEL : option}</EuiBadge>
+        ))}
+      </EuiBadgeGroup>
+      {hiddenCount > 0 && (
+        <p>
+          {i18n.translate('esqlUtils.valuesPreview.hiddenCount', {
+            defaultMessage: '+{hiddenCount} more',
+            values: { hiddenCount },
+          })}
+        </p>
+      )}
+    </div>
+  );
+};
diff --git a/src/platform/packages/shared/kbn-esql-utils/tsconfig.json b/src/platform/packages/shared/kbn-esql-utils/tsconfig.json
index f5cb80f044b82..54a8a59e4135a 100644
--- a/src/platform/packages/shared/kbn-esql-utils/tsconfig.json
+++ b/src/platform/packages/shared/kbn-esql-utils/tsconfig.json
@@ -23,9 +23,11 @@
     "@kbn/esql-types",
     "@kbn/search-types",
     "@kbn/expressions-plugin",
+    "@kbn/field-formats-common",
     "@kbn/field-types",
     "@kbn/es-types",
     "@kbn/i18n",
+    "@kbn/i18n-react",
     "@kbn/datemath",
     "@kbn/es-query",
     "@kbn/code-editor",
@@ -35,5 +37,6 @@
     "@kbn/controls-constants",
     "@kbn/presentation-publishing",
     "@kbn/controls-schemas",
+    "@kbn/ui-callout",
   ]
 }
diff --git a/src/platform/plugins/shared/controls/moon.yml b/src/platform/plugins/shared/controls/moon.yml
index 6c5c0d818aae1..f668aef64d077 100644
--- a/src/platform/plugins/shared/controls/moon.yml
+++ b/src/platform/plugins/shared/controls/moon.yml
@@ -49,7 +49,6 @@ dependsOn:
   - '@kbn/esql'
   - '@kbn/presentation-publishing-schemas'
   - '@kbn/controls-renderer'
-  - '@kbn/field-formats-common'
   - '@kbn/ui-callout'
 tags:
   - plugin
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/data_control_constants.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/data_control_constants.tsx
index e87a7cd914ece..688f4f6a4b449 100644
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/data_control_constants.tsx
+++ b/src/platform/plugins/shared/controls/public/controls/data_controls/data_control_constants.tsx
@@ -133,38 +133,6 @@ export const DataControlEditorStrings = {
           i18n.translate('controls.controlGroup.manageControl.dataSource.valuesPreview.title', {
             defaultMessage: 'Values preview',
           }),
-        getRunQueryButton: () =>
-          i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.valuesPreview.runQueryButton',
-            {
-              defaultMessage: 'Run query',
-            }
-          ),
-        getEmptyTitle: () =>
-          i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.valuesPreview.emptyTitle',
-            {
-              defaultMessage: 'No values returned',
-            }
-          ),
-        getEmptyText: () =>
-          i18n.translate('controls.controlGroup.manageControl.dataSource.valuesPreview.emptyText', {
-            defaultMessage: "This query isn't returning any values. Edit it and run it again.",
-          }),
-        getQueryNeedsRunningText: () =>
-          i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.valuesPreview.queryNeedsRunningText',
-            {
-              defaultMessage: 'Run the query to get a preview of possible values.',
-            }
-          ),
-        getErrorTitle: () =>
-          i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.valuesPreview.errorTitle',
-            {
-              defaultMessage: 'Error getting values preview',
-            }
-          ),
         getDataSourceLabel: () =>
           i18n.translate(
             'controls.controlGroup.manageControl.dataSource.valuesPreview.dataSourceLabel',
@@ -189,45 +157,6 @@ export const DataControlEditorStrings = {
             }}
           />
         ),
-        getMultiColumnErrorTitle: () =>
-          i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorTitle',
-            {
-              defaultMessage: 'Query must return a single column',
-            }
-          ),
-        getMultiColumnErrorBody: (totalColumns: number) => (
-          <FormattedMessage
-            id="controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorBody"
-            defaultMessage="Your query is currently returning {totalColumns} columns. Choose a column, or use {statsBy} to narrow your query down."
-            values={{
-              totalColumns,
-              statsBy: <EuiCode>STATS BY</EuiCode>,
-            }}
-          />
-        ),
-        getColumnsListLabel: () =>
-          i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.valuesPreview.columnsListLabel',
-            {
-              defaultMessage: 'Columns',
-            }
-          ),
-        getSelectAColumnText: () =>
-          i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.valuesPreview.selectAColumnText',
-            {
-              defaultMessage: 'Select a column',
-            }
-          ),
-        getMinText: () =>
-          i18n.translate('controls.controlGroup.manageControl.dataSource.valuesPreview.minText', {
-            defaultMessage: 'Minimum value',
-          }),
-        getMaxText: () =>
-          i18n.translate('controls.controlGroup.manageControl.dataSource.valuesPreview.maxText', {
-            defaultMessage: 'Maximum value',
-          }),
       },
     },
     displaySettings: {
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/configure_values_query.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/editor/configure_values_query.tsx
index 4909a21fdad30..af56642f7a53e 100644
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/configure_values_query.tsx
+++ b/src/platform/plugins/shared/controls/public/controls/data_controls/editor/configure_values_query.tsx
@@ -7,7 +7,17 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFormRow, EuiSpacer } from '@elastic/eui';
+import {
+  EuiCode,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIconTip,
+  EuiLoadingSpinner,
+  EuiPanel,
+  EuiSpacer,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { appendStatsByToQuery, getIndexPatternFromESQLQuery } from '@kbn/esql-utils';
 import type { AggregateQuery } from '@kbn/es-query';
@@ -17,13 +27,19 @@ import { ESQLLangEditor } from '@kbn/esql/public';
 import type { ESQLColumn } from '@kbn/es-types';
 import type { ESQLControlVariable } from '@kbn/esql-types';
 import { apiCanAddNewPanel, apiCanPinPanels } from '@kbn/presentation-publishing';
-import { DEFAULT_ESQL_OPTIONS_LIST_STATE, ESQL_CONTROL } from '@kbn/controls-constants';
+import type { OPTIONS_LIST_CONTROL } from '@kbn/controls-constants';
+import {
+  DEFAULT_ESQL_OPTIONS_LIST_STATE,
+  ESQL_CONTROL,
+  RANGE_SLIDER_CONTROL,
+} from '@kbn/controls-constants';
+import { ESQLValuesPreview } from '@kbn/esql-utils';
 import { dataService } from '../../../services/kibana_services';
 import { getESQLSingleColumnValues } from '../../../../common/options_list';
 import { getControlsTimezone } from '../../utils';
-import { ESQLValuesPreview } from './esql_values_preview';
 import type { DataControlEditorState } from './types';
 import { getDataViewIdFromESQLQuery } from '../../utils/get_data_view_id_from_esql_query';
+import { DataControlEditorStrings } from '../data_control_constants';
 
 interface ConfigureValuesQueryProps {
   editorState: Partial<DataControlEditorState>;
@@ -32,6 +48,7 @@ interface ConfigureValuesQueryProps {
   isEdit: boolean;
   esqlVariables?: ESQLControlVariable[];
   parentApi?: unknown;
+  selectedControlType?: typeof OPTIONS_LIST_CONTROL | typeof RANGE_SLIDER_CONTROL;
   // Re-opens the parent data control editor flyout. Used after the inner ESQL variable
   // control creation flyout closes
   reopenEditor?: (overrides?: Partial<DataControlEditorState>) => void;
@@ -44,6 +61,7 @@ export const ConfigureValuesQuery = ({
   isEdit,
   esqlVariables = [],
   parentApi,
+  selectedControlType,
   reopenEditor,
 }: ConfigureValuesQueryProps) => {
   const [previewOptions, setPreviewOptions] = useState<string[] | number[]>([]);
@@ -199,15 +217,64 @@ export const ConfigureValuesQuery = ({
         />
       </EuiFormRow>
       <EuiSpacer size="s" />
-      <ESQLValuesPreview
-        previewOptions={previewOptions}
-        previewColumns={previewColumns}
-        previewError={previewError}
-        queryNeedsRunning={previewQueryNeedsRunning}
-        updateQuery={appendColumnToESQLQuery}
-        isQueryRunning={isPreviewQueryRunning}
-        dataSource={dataSource}
-      />
+      {isPreviewQueryRunning ? (
+        <EuiPanel
+          hasBorder={false}
+          hasShadow={false}
+          paddingSize="xl"
+          css={css`
+            text-align: center;
+          `}
+        >
+          <EuiLoadingSpinner size="l" />
+        </EuiPanel>
+      ) : (
+        <>
+          {previewColumns.length === 1 && (
+            <>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getDataSourceLabel()}
+                  >
+                    <EuiCode>{dataSource}</EuiCode>
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={
+                      <>
+                        {DataControlEditorStrings.manageControl.dataSource.valuesPreview.getFieldLabel()}{' '}
+                        <EuiIconTip
+                          type="question"
+                          color="primary"
+                          content={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getFieldTooltip()}
+                        />
+                      </>
+                    }
+                  >
+                    <EuiCode>{previewColumns[0].name}</EuiCode>
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer size="s" />
+            </>
+          )}
+          {!previewQueryNeedsRunning && (
+            <EuiFormRow
+              label={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getTitle()}
+            >
+              <ESQLValuesPreview
+                values={previewOptions}
+                columns={previewColumns}
+                error={previewError}
+                updateQuery={appendColumnToESQLQuery}
+                isRangeControl={selectedControlType === RANGE_SLIDER_CONTROL}
+              />
+            </EuiFormRow>
+          )}
+        </>
+      )}
     </>
   );
 };
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/data_control_editor.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/editor/data_control_editor.tsx
index 7f5a52e7d0d05..3deb066ebe2f4 100644
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/data_control_editor.tsx
+++ b/src/platform/plugins/shared/controls/public/controls/data_controls/editor/data_control_editor.tsx
@@ -43,6 +43,7 @@ import { KbnDangerCallout } from '@kbn/ui-callout';
 
 import { triggers } from '@kbn/ui-actions-plugin/public';
 import { CONTROL_MENU_TRIGGER } from '@kbn/ui-actions-plugin/common/trigger_ids';
+import type { OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '@kbn/controls-constants';
 import { ControlValuesSource, DEFAULT_CONTROL_VALUES_SOURCE } from '@kbn/controls-constants';
 import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
 import type { PublishesESQLVariables } from '@kbn/esql-types';
@@ -59,7 +60,7 @@ import { ConfigureValuesQuery } from './configure_values_query';
 
 export interface ControlEditorProps<State extends DataControlEditorState = DataControlEditorState> {
   initialState: Partial<State>;
-  controlType?: string;
+  controlType?: typeof OPTIONS_LIST_CONTROL | typeof RANGE_SLIDER_CONTROL;
   controlId?: string;
   initialDefaultPanelTitle?: string;
   parentApi: unknown;
@@ -111,8 +112,8 @@ const CompatibleControlTypesComponent = ({
   selectedControlType: selectedAction,
   setSelectedControlType: setSelectedAction,
 }: Partial<DataControlEditorState> & {
-  selectedControlType?: string;
-  setSelectedControlType: (type: string) => void;
+  selectedControlType?: typeof OPTIONS_LIST_CONTROL | typeof RANGE_SLIDER_CONTROL;
+  setSelectedControlType: (type: typeof OPTIONS_LIST_CONTROL | typeof RANGE_SLIDER_CONTROL) => void;
 }) => {
   const controlActionRegistry = useControlActionRegistry();
   const [isCompatible, setIsCompatible] = useState<{ [type: string]: boolean }>({});
@@ -162,7 +163,11 @@ const CompatibleControlTypesComponent = ({
               data-test-subj={`create__${action.type}`}
               isSelected={action.type === selectedAction}
               disabled={disabled}
-              onClick={() => setSelectedAction(action.type)}
+              onClick={() =>
+                setSelectedAction(
+                  action.type as typeof OPTIONS_LIST_CONTROL | typeof RANGE_SLIDER_CONTROL
+                )
+              }
               label={action.getDisplayName(controlTypeContext)}
             >
               <EuiIcon
@@ -218,7 +223,9 @@ export const DataControlEditor = <State extends DataControlEditorState = DataCon
     initialDefaultPanelTitle ?? initialState.field_name ?? ''
   );
   const [panelTitle, setPanelTitle] = useState<string>(initialState.title ?? defaultPanelTitle);
-  const [selectedControlType, setSelectedControlType] = useState<string | undefined>(controlType);
+  const [selectedControlType, setSelectedControlType] = useState<
+    typeof OPTIONS_LIST_CONTROL | typeof RANGE_SLIDER_CONTROL | undefined
+  >(controlType);
   const [controlOptionsValid, setControlOptionsValid] = useState<boolean>(true);
 
   const editorConfig = useMemo<ControlGroupEditorConfig | undefined>(() => {
@@ -335,7 +342,10 @@ export const DataControlEditor = <State extends DataControlEditorState = DataCon
           }
           return undefined;
         })();
-        if (firstCompatible) setSelectedControlType(firstCompatible.type);
+        if (firstCompatible)
+          setSelectedControlType(
+            firstCompatible.type as typeof OPTIONS_LIST_CONTROL | typeof RANGE_SLIDER_CONTROL
+          );
       }
 
       /**
@@ -463,6 +473,7 @@ export const DataControlEditor = <State extends DataControlEditorState = DataCon
               isEdit={isEdit}
               esqlVariables={parentESQLVariables}
               parentApi={parentApi}
+              selectedControlType={selectedControlType}
               reopenEditor={
                 reopenEditor
                   ? (esqlOverrides) =>
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/esql_values_preview.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/editor/esql_values_preview.tsx
deleted file mode 100644
index d291b31082cb1..0000000000000
--- a/src/platform/plugins/shared/controls/public/controls/data_controls/editor/esql_values_preview.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-/*
- * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useMemo } from 'react';
-import { css } from '@emotion/react';
-import {
-  EuiBadge,
-  EuiBadgeGroup,
-  EuiCallOut,
-  EuiCode,
-  EuiFlexGrid,
-  EuiFormRow,
-  EuiPanel,
-  EuiSpacer,
-  EuiStat,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiIconTip,
-} from '@elastic/eui';
-import { max, min } from 'lodash';
-import type { ESQLColumn } from '@kbn/es-types';
-import { isNumericType } from '@kbn/esql-language';
-import { EMPTY_LABEL } from '@kbn/field-formats-common';
-import { ChooseColumnPopover } from './choose_column_popover';
-import { DataControlEditorStrings } from '../data_control_constants';
-
-export const ESQLValuesPreview: React.FC<{
-  previewOptions: string[] | number[];
-  previewColumns: ESQLColumn[];
-  previewError?: Error;
-  updateQuery: (column: string) => void;
-  queryNeedsRunning: boolean;
-  isQueryRunning: boolean;
-  dataSource: string;
-}> = ({
-  previewOptions,
-  previewError,
-  previewColumns,
-  updateQuery,
-  queryNeedsRunning,
-  isQueryRunning,
-  dataSource,
-}) => {
-  const isEmpty = useMemo(() => previewOptions.length === 0, [previewOptions]);
-
-  const multiColumnResult = useMemo(() => previewColumns.length > 1, [previewColumns]);
-  const singleColumn = useMemo(
-    () => (previewColumns.length === 1 ? previewColumns[0] : null),
-    [previewColumns]
-  );
-
-  const range = useMemo(() => {
-    if (isNumericType(singleColumn?.type)) {
-      const optionsAsNumbers = previewOptions.map((v) => Number(v));
-      return { min: min(optionsAsNumbers), max: max(optionsAsNumbers) };
-    }
-    return null;
-  }, [previewOptions, singleColumn]);
-
-  const body = previewError ? (
-    <EuiPanel
-      hasBorder
-      paddingSize="xs"
-      color="danger"
-      css={css`
-        text-align: center;
-      `}
-    >
-      <EuiCallOut
-        announceOnMount
-        title={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getErrorTitle()}
-        color="danger"
-        iconType="error"
-        size="s"
-      >
-        <p>{previewError.message}</p>
-      </EuiCallOut>
-    </EuiPanel>
-  ) : multiColumnResult ? (
-    <EuiPanel
-      hasBorder
-      paddingSize="xs"
-      color="warning"
-      css={css`
-        text-align: center;
-      `}
-    >
-      <EuiCallOut
-        announceOnMount
-        title={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getMultiColumnErrorTitle()}
-        color="warning"
-        iconType="warning"
-        size="s"
-        data-test-subj="esqlMoreThanOneColumnCallout"
-      >
-        <p>
-          {DataControlEditorStrings.manageControl.dataSource.valuesPreview.getMultiColumnErrorBody(
-            previewColumns.length
-          )}
-        </p>
-        <ChooseColumnPopover columns={previewColumns} updateQuery={updateQuery} />
-      </EuiCallOut>
-    </EuiPanel>
-  ) : isEmpty ? (
-    <EuiPanel
-      hasBorder
-      paddingSize="xs"
-      color="warning"
-      css={css`
-        text-align: center;
-      `}
-    >
-      <EuiCallOut
-        announceOnMount
-        title={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getEmptyTitle()}
-        color="warning"
-        iconType="warning"
-        size="s"
-        data-test-subj="esqlMoreThanOneColumnCallout"
-      >
-        <p>{DataControlEditorStrings.manageControl.dataSource.valuesPreview.getEmptyText()}</p>
-      </EuiCallOut>
-    </EuiPanel>
-  ) : range ? (
-    <EuiFlexGrid columns={2} data-test-subj="esqlValuesPreviewRange">
-      <EuiStat
-        titleSize="s"
-        title={range.min}
-        description={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getMinText()}
-      />
-      <EuiStat
-        titleSize="s"
-        title={range.max}
-        description={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getMaxText()}
-      />
-    </EuiFlexGrid>
-  ) : (
-    <div
-      style={{
-        maxHeight: '200px',
-        overflow: 'auto',
-      }}
-    >
-      <EuiBadgeGroup data-test-subj="esqlValuesPreviewStrings">
-        {previewOptions.map((option, i) => (
-          <EuiBadge key={`${i}-${option}`}>{option === '' ? EMPTY_LABEL : option}</EuiBadge>
-        ))}
-      </EuiBadgeGroup>
-    </div>
-  );
-
-  return isQueryRunning ? (
-    <EuiPanel
-      hasBorder={false}
-      hasShadow={false}
-      paddingSize="xl"
-      css={css`
-        text-align: center;
-      `}
-    >
-      <EuiLoadingSpinner size="l" />
-    </EuiPanel>
-  ) : (
-    <>
-      {singleColumn && (
-        <>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiFormRow
-                label={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getDataSourceLabel()}
-              >
-                <EuiCode>{dataSource}</EuiCode>
-              </EuiFormRow>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiFormRow
-                label={
-                  <>
-                    {DataControlEditorStrings.manageControl.dataSource.valuesPreview.getFieldLabel()}{' '}
-                    <EuiIconTip
-                      type="question"
-                      color="primary"
-                      content={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getFieldTooltip()}
-                    />
-                  </>
-                }
-              >
-                <EuiCode>{singleColumn.name}</EuiCode>
-              </EuiFormRow>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size="s" />
-        </>
-      )}
-      {!queryNeedsRunning && (
-        <EuiFormRow
-          label={DataControlEditorStrings.manageControl.dataSource.valuesPreview.getTitle()}
-        >
-          {body}
-        </EuiFormRow>
-      )}
-    </>
-  );
-};
diff --git a/src/platform/plugins/shared/controls/tsconfig.json b/src/platform/plugins/shared/controls/tsconfig.json
index dcf263ab680f6..a23499aaa6430 100644
--- a/src/platform/plugins/shared/controls/tsconfig.json
+++ b/src/platform/plugins/shared/controls/tsconfig.json
@@ -44,7 +44,6 @@
     "@kbn/esql",
     "@kbn/presentation-publishing-schemas",
     "@kbn/controls-renderer",
-    "@kbn/field-formats-common",
     "@kbn/ui-callout"
   ],
   "exclude": ["target/**/*"]
diff --git a/src/platform/plugins/shared/esql/moon.yml b/src/platform/plugins/shared/esql/moon.yml
index 0dc4ab67aefa9..6c8e26b54acfc 100644
--- a/src/platform/plugins/shared/esql/moon.yml
+++ b/src/platform/plugins/shared/esql/moon.yml
@@ -63,6 +63,7 @@ dependsOn:
   - '@kbn/management-settings-ids'
   - '@kbn/core-ui-settings-server'
   - '@kbn/es-errors'
+  - '@kbn/es-types'
 tags:
   - plugin
   - prod
diff --git a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.test.tsx b/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.test.tsx
deleted file mode 100644
index b0940aaca7df1..0000000000000
--- a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { ChooseColumnPopover } from './choose_column_popover';
-
-describe('ChooseColumnPopover', () => {
-  it('should render a search input and a list', async () => {
-    const user = userEvent.setup();
-    render(<ChooseColumnPopover columns={['col1', 'col2']} updateQuery={jest.fn()} />);
-    // open the popover
-    await user.click(screen.getByTestId('chooseColumnBtn'));
-    // expect the search input to be rendered
-    expect(screen.getByTestId('selectableColumnSearch')).toBeInTheDocument();
-    expect(screen.getByTestId('selectableColumnList')).toBeInTheDocument();
-  });
-
-  it('should update the list when there is a text in the input', async () => {
-    const user = userEvent.setup();
-    render(<ChooseColumnPopover columns={['col1', 'col2']} updateQuery={jest.fn()} />);
-    // open the popover
-    await user.click(screen.getByTestId('chooseColumnBtn'));
-    // expect the search input to be rendered
-
-    // type in the search input
-    const input = screen.getByTestId('selectableColumnSearch');
-    fireEvent.change(input, { target: { value: 'col2' } });
-
-    // get the list
-    const list = screen.getByTestId('selectableColumnList');
-    const listItems = list.querySelector('li');
-    expect(listItems).toHaveTextContent('col2');
-  });
-
-  it('should call the updateQuery prop if a list item is clicked', async () => {
-    const user = userEvent.setup();
-    const updateQuerySpy = jest.fn();
-    render(<ChooseColumnPopover columns={['col1', 'col2']} updateQuery={updateQuerySpy} />);
-    // open the popover
-    await user.click(screen.getByTestId('chooseColumnBtn'));
-    // expect the search input to be rendered
-
-    // type in the search input
-    const input = screen.getByTestId('selectableColumnSearch');
-    fireEvent.change(input, { target: { value: 'col2' } });
-
-    const list = screen.getByTestId('selectableColumnList');
-    const listItems = list.querySelector('li');
-
-    // click the list item
-    if (listItems) await user.click(listItems);
-    expect(updateQuerySpy).toHaveBeenCalledWith('col2');
-  });
-});
diff --git a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.tsx b/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.tsx
deleted file mode 100644
index d4c0ff8498789..0000000000000
--- a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useCallback, useState } from 'react';
-import { i18n } from '@kbn/i18n';
-import type { EuiSelectableOption } from '@elastic/eui';
-import { EuiLink, EuiPopover, EuiSelectable } from '@elastic/eui';
-import { css } from '@emotion/react';
-
-export function ChooseColumnPopover({
-  columns,
-  updateQuery,
-}: {
-  columns: string[];
-  updateQuery: (column: string) => void;
-}) {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [options, setOptions] = useState<EuiSelectableOption[]>(
-    columns.map((column) => ({ label: column }))
-  );
-
-  const onButtonClick = () => setIsPopoverOpen((status) => !status);
-  const closePopover = () => setIsPopoverOpen(false);
-
-  const button = (
-    <EuiLink
-      css={css`
-        vertical-align: top;
-      `}
-      onClick={onButtonClick}
-      data-test-subj="chooseColumnBtn"
-    >
-      {i18n.translate('esql.flyout.chooseColumnBtn.label', {
-        defaultMessage: 'here',
-      })}
-    </EuiLink>
-  );
-
-  const onColumnChange = useCallback(
-    (newOptions: EuiSelectableOption[]) => {
-      setOptions(newOptions);
-
-      const selectedColumn = newOptions.find((option) => option.checked === 'on');
-      if (selectedColumn) {
-        updateQuery(selectedColumn.label);
-      }
-    },
-    [updateQuery]
-  );
-
-  return (
-    <EuiPopover
-      aria-label={i18n.translate('esql.flyout.chooseColumnPopoverLabel', {
-        defaultMessage: 'Choose a column',
-      })}
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-    >
-      <EuiSelectable
-        aria-label={i18n.translate('esql.flyout.chooseColumnList.label', {
-          defaultMessage: 'Select a column',
-        })}
-        searchable
-        searchProps={{
-          'data-test-subj': 'selectableColumnSearch',
-        }}
-        listProps={{
-          'data-test-subj': 'selectableColumnList',
-        }}
-        singleSelection="always"
-        options={options}
-        onChange={onColumnChange}
-        data-test-subj="selectableColumnContainer"
-      >
-        {(list, search) => (
-          <>
-            {search}
-            {list}
-          </>
-        )}
-      </EuiSelectable>
-    </EuiPopover>
-  );
-}
diff --git a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.test.tsx b/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.test.tsx
index 33c34f696d0bd..3777b5c2e0ccc 100644
--- a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.test.tsx
+++ b/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.test.tsx
@@ -34,10 +34,7 @@ jest.mock('@kbn/esql-utils', () => {
         columns: [
           {
             name: 'field',
-            id: 'field',
-            meta: {
-              type: 'keyword',
-            },
+            type: 'keyword',
           },
         ],
         values: [['v1'], ['v2']],
@@ -48,6 +45,8 @@ jest.mock('@kbn/esql-utils', () => {
     getValuesFromQueryField: jest.fn().mockReturnValue('field'),
     getESQLQueryColumnsRaw: jest.fn().mockResolvedValue([{ name: 'column1' }, { name: 'column2' }]),
     getVariableNamePrefix: actual.getVariableNamePrefix,
+    ESQLValuesPreview: actual.ESQLValuesPreview,
+    appendStatsByToQuery: actual.appendStatsByToQuery,
   };
 });
 
@@ -249,7 +248,7 @@ describe('ValueControlForm', () => {
         );
 
         // values preview panel should be rendered
-        expect(await findByTestId('esqlValuesPreview')).toBeInTheDocument();
+        expect(await findByTestId('esqlValuesPreviewStrings')).toBeInTheDocument();
       });
 
       it('should be able to change in fields type', async () => {
diff --git a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.tsx b/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.tsx
index b586bdcdb8ed7..073aa281f970e 100644
--- a/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.tsx
+++ b/src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.tsx
@@ -8,16 +8,9 @@
  */
 
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
-import {
-  EuiCallOut,
-  EuiComboBox,
-  EuiFormLabel,
-  EuiFormRow,
-  EuiPanel,
-  EuiSpacer,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiComboBox, EuiFormLabel, EuiFormRow, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
+import type { ESQLColumn } from '@kbn/es-types';
 import type { TimeRange } from '@kbn/es-query';
 import {
   ESQLVariableType,
@@ -30,11 +23,11 @@ import {
 import type { OptionsListESQLControlState } from '@kbn/controls-schemas';
 import {
   appendStatsByToQuery,
+  ESQLValuesPreview,
   getESQLResults,
   getIndexPatternFromESQLQuery,
 } from '@kbn/esql-utils';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import type { ISearchGeneric } from '@kbn/search-types';
 import { isEqual } from 'lodash';
@@ -44,7 +37,6 @@ import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { reportEsqlError } from '@kbn/esql-editor';
 import { ESQLLangEditor } from '../../../create_editor';
 import type { ServiceDeps } from '../../../kibana_services';
-import { ChooseColumnPopover } from './choose_column_popover';
 import { ControlLabel, ControlSelectionType } from './shared_form_components';
 
 interface ValueControlFormProps {
@@ -126,8 +118,8 @@ export function ValueControlForm({
       : ''
   );
   const [esqlQueryErrors, setEsqlQueryErrors] = useState<Error[] | undefined>();
-  const [queryColumns, setQueryColumns] = useState<string[]>(
-    valuesRetrieval ? [valuesRetrieval] : []
+  const [queryColumns, setQueryColumns] = useState<ESQLColumn[]>(
+    valuesRetrieval ? [{ name: valuesRetrieval, type: 'keyword' as const }] : []
   );
   const [showValuesPreview, setShowValuesPreview] = useState<boolean>(false);
   const [label, setLabel] = useState(initialState?.title ?? '');
@@ -197,7 +189,7 @@ export function ValueControlForm({
         if (!isMounted() || controller.signal.aborted) {
           return;
         }
-        const columns = results.response.columns.map((col) => col.name);
+        const columns = results.response.columns;
         setQueryColumns(columns);
         setShowValuesPreview(true);
 
@@ -352,61 +344,12 @@ export function ValueControlForm({
                 margin-block-start: ${theme.euiTheme.size.base};
               `}
             >
-              <>
-                {queryColumns.length === 0 && (
-                  <EuiCallOut
-                    announceOnMount
-                    title={i18n.translate('esql.flyout.displayNoValuesForControlCallout.title', {
-                      defaultMessage:
-                        "This query isn't returning any values. Edit it and run it again.",
-                    })}
-                    color="warning"
-                    iconType="warning"
-                    size="s"
-                    data-test-subj="esqlNoValuesForControlCallout"
-                  />
-                )}
-                {queryColumns.length === 1 && (
-                  <EuiPanel
-                    paddingSize="s"
-                    color="primary"
-                    css={css`
-                      white-space: wrap;
-                      overflow-y: auto;
-                      max-height: 200px;
-                    `}
-                    data-test-subj="esqlValuesPreview"
-                  >
-                    {selectedValues.map((value) => value.label).join(', ')}
-                  </EuiPanel>
-                )}
-                {queryColumns.length > 1 && (
-                  <EuiCallOut
-                    announceOnMount
-                    title={i18n.translate('esql.flyout.displayMultipleColsCallout.title', {
-                      defaultMessage: 'Your query must return a single column',
-                    })}
-                    color="warning"
-                    iconType="warning"
-                    size="s"
-                    data-test-subj="esqlMoreThanOneColumnCallout"
-                  >
-                    <p>
-                      <FormattedMessage
-                        id="esql.flyout.displayMultipleColsCallout.description"
-                        defaultMessage="Your query is currently returning {totalColumns} columns. Choose column {chooseColumnPopover} or use {boldText}."
-                        values={{
-                          totalColumns: queryColumns.length,
-                          boldText: <strong>STATS BY</strong>,
-                          chooseColumnPopover: (
-                            <ChooseColumnPopover columns={queryColumns} updateQuery={updateQuery} />
-                          ),
-                        }}
-                      />
-                    </p>
-                  </EuiCallOut>
-                )}
-              </>
+              <ESQLValuesPreview
+                values={selectedValues.map((v) => v.label)}
+                columns={queryColumns}
+                error={esqlQueryErrors?.[0]}
+                updateQuery={updateQuery}
+              />
             </EuiFormRow>
           )}
         </>
diff --git a/src/platform/plugins/shared/esql/tsconfig.json b/src/platform/plugins/shared/esql/tsconfig.json
index f4c8b56284354..e46a8cefe23b0 100644
--- a/src/platform/plugins/shared/esql/tsconfig.json
+++ b/src/platform/plugins/shared/esql/tsconfig.json
@@ -55,6 +55,7 @@
     "@kbn/management-settings-ids",
     "@kbn/core-ui-settings-server",
     "@kbn/es-errors",
+    "@kbn/es-types",
   ],
   "exclude": [
     "target/**/*",
diff --git a/x-pack/platform/plugins/private/translations/translations/de-DE.json b/x-pack/platform/plugins/private/translations/translations/de-DE.json
index d0feda605fb95..1d0061e875c5d 100644
--- a/x-pack/platform/plugins/private/translations/translations/de-DE.json
+++ b/x-pack/platform/plugins/private/translations/translations/de-DE.json
@@ -982,20 +982,9 @@
     "controls.controlGroup.manageControl.dataSource.fieldListErrorTitle": "Fehler beim Laden der Feldliste",
     "controls.controlGroup.manageControl.dataSource.fieldTitle": "Feld",
     "controls.controlGroup.manageControl.dataSource.selectDataViewMessage": "Bitte wählen Sie eine Datenquelle",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.columnsListLabel": "Spalten",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.dataSourceLabel": "Datenquelle",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyText": "Diese Abfrage liefert keine Werte. Bearbeiten Sie sie und führen Sie sie erneut aus.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyTitle": "Keine Werte",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.errorTitle": "Fehler beim Abrufen der Wertevorschau",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldLabel": "Feld",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldTooltipText": "Das Feld, auf dem die Steuerung und die angebotenen Optionen basieren. Dieses Feld wird durch die anhand Ihrer Abfrage erstellte Spalte bestimmt, zum Beispiel durch Verwendung von {statsBy}- oder {rename}-Befehlen.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.maxText": "Maximalwert",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.minText": "Mindestwert",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorBody": "Ihre Abfrage ergibt derzeit {totalColumns} Spalten. Wählen Sie eine Spalte oder verwenden Sie {statsBy}, um Ihre Anfrage einzugrenzen.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorTitle": "Die Abfrage muss eine einzelne Spalte zurückgeben",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.queryNeedsRunningText": "Führen Sie die Abfrage aus, um eine Vorschau der möglichen Werte zu erhalten.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.runQueryButton": "Abfrage ausführen",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.selectAColumnText": "Wählen Sie eine Spalte aus",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.title": "Vorschau der Werte",
     "controls.controlGroup.manageControl.displaySettings.titleInputTitle": "Label",
     "controls.controlGroup.manageControl.editFlyoutTitle": "Steuerungen bearbeiten",
@@ -3490,16 +3479,10 @@
     "esql.flyout..applyFlyoutAriaLabel": "Änderungen anwenden",
     "esql.flyout..cancelFlyoutAriaLabel": "Vorgenommene Änderungen abbrechen",
     "esql.flyout.cancelLabel": "Abbrechen",
-    "esql.flyout.chooseColumnBtn.label": "hier",
-    "esql.flyout.chooseColumnList.label": "Wählen Sie eine Spalte aus",
-    "esql.flyout.chooseColumnPopoverLabel": "Wählen Sie eine Spalte",
     "esql.flyout.controlTypeOptions.staticValuesLabel": "Statische Werte",
     "esql.flyout.controlTypeOptions.valuesFromQueryLabel": "Werte aus einer Abfrage",
     "esql.flyout.controlTypeOptionsOptions.disabledTooltip": "Derzeit ist nur der Typ [Static values] verfügbar, um Funktionen oder Feldnamen zu ersetzen.",
     "esql.flyout.controlTypeOptionsOptions.label": "Typ",
-    "esql.flyout.displayMultipleColsCallout.description": "Ihre Abfrage gibt derzeit {totalColumns} Spalten zurück. Wählen Sie die Spalte {chooseColumnPopover} oder nutzen Sie {boldText}.",
-    "esql.flyout.displayMultipleColsCallout.title": "Ihre Abfrage muss eine einzelne Spalte zurückgeben",
-    "esql.flyout.displayNoValuesForControlCallout.title": "Diese Abfrage liefert keine Werte zurück. Bearbeiten Sie sie und führen Sie sie erneut aus.",
     "esql.flyout.editTitle": "Variablenkontrolle bearbeiten",
     "esql.flyout.experimentalLabel.content": "ES|QL-Variablen befinden sich derzeit in der technischen Vorschau.",
     "esql.flyout.experimentalLabel.title": "Technische Vorschau",
@@ -3625,6 +3608,14 @@
     "esqlEditor.visor.sourcesDropdownPopoverLabel": "Datenquellen",
     "esqlEditor.visor.techPreviewTooltip": "Technische Vorschau",
     "esqlUtils.columnsErrorMsg": "Spalten können nicht geladen werden. {errorMessage}",
+    "esqlUtils.valuesPreview.emptyText": "Diese Abfrage liefert keine Werte. Bearbeiten Sie sie und führen Sie sie erneut aus.",
+    "esqlUtils.valuesPreview.emptyTitle": "Keine Werte",
+    "esqlUtils.valuesPreview.errorTitle": "Fehler beim Abrufen der Wertevorschau",
+    "esqlUtils.valuesPreview.maxText": "Maximalwert",
+    "esqlUtils.valuesPreview.minText": "Mindestwert",
+    "esqlUtils.valuesPreview.multiColumnErrorBody": "Ihre Abfrage ergibt derzeit {totalColumns} Spalten. Wählen Sie eine Spalte oder verwenden Sie {statsBy}, um Ihre Anfrage einzugrenzen.",
+    "esqlUtils.valuesPreview.multiColumnErrorTitle": "Die Abfrage muss eine einzelne Spalte zurückgeben",
+    "esqlUtils.valuesPreview.selectAColumnText": "Wählen Sie eine Spalte aus",
     "esQuery.kql.errors.endOfInputText": "Ende des Eingangs",
     "esQuery.kql.errors.fieldNameText": "Feldname",
     "esQuery.kql.errors.literalText": "wörtlich",
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
index 2b31a1498b5b2..ceb0a535e21fc 100644
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -980,20 +980,9 @@
     "controls.controlGroup.manageControl.dataSource.fieldListErrorTitle": "Erreur lors du chargement de la liste des champs",
     "controls.controlGroup.manageControl.dataSource.fieldTitle": "Champ",
     "controls.controlGroup.manageControl.dataSource.selectDataViewMessage": "Veuillez sélectionner une vue de données",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.columnsListLabel": "Colonnes",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.dataSourceLabel": "Source de données",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyText": "Cette requête ne renvoie aucune valeur. Modifiez-la et exécutez-la à nouveau.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyTitle": "Aucune valeur renvoyée",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.errorTitle": "Erreur lors de l'obtention de l'aperçu des valeurs",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldLabel": "Champ",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldTooltipText": "Le champ sur lequel se baseront le contrôle et les options qu'il propose. Ce champ est déterminé par la colonne renvoyée par votre requête, par exemple en utilisant les commandes {statsBy} ou {rename}.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.maxText": "Valeur maximale",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.minText": "Valeur minimale",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorBody": "Votre requête renvoie actuellement {totalColumns} colonnes. Choisissez une colonne, ou utilisez {statsBy} pour affiner votre requête.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorTitle": "La requête doit renvoyer une seule colonne",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.queryNeedsRunningText": "Exécutez la requête pour obtenir un aperçu des valeurs possibles.",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.runQueryButton": "Exécuter la requête",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.selectAColumnText": "Sélectionner une colonne",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.title": "Aperçu des valeurs",
     "controls.controlGroup.manageControl.displaySettings.titleInputTitle": "Étiquette",
     "controls.controlGroup.manageControl.editFlyoutTitle": "Modifier le contrôle",
@@ -3490,16 +3479,10 @@
     "esql.flyout..applyFlyoutAriaLabel": "Appliquer les modifications",
     "esql.flyout..cancelFlyoutAriaLabel": "Annuler les changements appliqués",
     "esql.flyout.cancelLabel": "Annuler",
-    "esql.flyout.chooseColumnBtn.label": "ici",
-    "esql.flyout.chooseColumnList.label": "Sélectionnez une colonne",
-    "esql.flyout.chooseColumnPopoverLabel": "Choisir une colonne",
     "esql.flyout.controlTypeOptions.staticValuesLabel": "Valeurs statiques",
     "esql.flyout.controlTypeOptions.valuesFromQueryLabel": "Valeurs d'une requête",
     "esql.flyout.controlTypeOptionsOptions.disabledTooltip": "Pour le moment, seul le type [Valeurs statiques] est proposé pour le remplacement de fonctions ou de noms de champs.",
     "esql.flyout.controlTypeOptionsOptions.label": "Type",
-    "esql.flyout.displayMultipleColsCallout.description": "Votre recherche renvoie actuellement {totalColumns} colonnes. Choisissez une colonne {chooseColumnPopover} ou utilisez {boldText}.",
-    "esql.flyout.displayMultipleColsCallout.title": "Votre requête doit renvoyer une seule colonne.",
-    "esql.flyout.displayNoValuesForControlCallout.title": "Cette requête ne renvoie aucune valeur. Modifiez-le et exécutez-le à nouveau.",
     "esql.flyout.editTitle": "Modifier le contrôle de variable",
     "esql.flyout.experimentalLabel.content": "Les variables ES|QL sont actuellement en version d'évaluation technique.",
     "esql.flyout.experimentalLabel.title": "Version d'évaluation technique",
@@ -3625,6 +3608,14 @@
     "esqlEditor.visor.sourcesDropdownPopoverLabel": "Sources de données",
     "esqlEditor.visor.techPreviewTooltip": "Version d'évaluation technique",
     "esqlUtils.columnsErrorMsg": "Impossible de charger les colonnes. {errorMessage}",
+    "esqlUtils.valuesPreview.emptyText": "Cette requête ne renvoie aucune valeur. Modifiez-la et exécutez-la à nouveau.",
+    "esqlUtils.valuesPreview.emptyTitle": "Aucune valeur renvoyée",
+    "esqlUtils.valuesPreview.errorTitle": "Erreur lors de l'obtention de l'aperçu des valeurs",
+    "esqlUtils.valuesPreview.maxText": "Valeur maximale",
+    "esqlUtils.valuesPreview.minText": "Valeur minimale",
+    "esqlUtils.valuesPreview.multiColumnErrorBody": "Votre requête renvoie actuellement {totalColumns} colonnes. Choisissez une colonne, ou utilisez {statsBy} pour affiner votre requête.",
+    "esqlUtils.valuesPreview.multiColumnErrorTitle": "La requête doit renvoyer une seule colonne",
+    "esqlUtils.valuesPreview.selectAColumnText": "Sélectionnez une colonne",
     "esQuery.kql.errors.endOfInputText": "fin de l'entrée",
     "esQuery.kql.errors.fieldNameText": "nom du champ",
     "esQuery.kql.errors.literalText": "littéral",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
index 142fb8de35d23..01fae63e742b1 100644
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -982,20 +982,9 @@
     "controls.controlGroup.manageControl.dataSource.fieldListErrorTitle": "フィールドリストの読み込みエラー",
     "controls.controlGroup.manageControl.dataSource.fieldTitle": "フィールド",
     "controls.controlGroup.manageControl.dataSource.selectDataViewMessage": "データビューを選択してください",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.columnsListLabel": "列",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.dataSourceLabel": "データソース",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyText": "このクエリは値を返していません。編集して、再度実行してください。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyTitle": "値は返されませんでした",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.errorTitle": "値のプレビューの取得中にエラーが発生しました",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldLabel": "フィールド",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldTooltipText": "コントロールおよびそのオプションの基となるフィールド。このフィールドは、クエリによって返される列によって決定されます。たとえば、{statsBy}または{rename}コマンドを使用します。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.maxText": "最高値",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.minText": "最小値",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorBody": "クエリは現在{totalColumns}列を返しています。列を選択するか、{statsBy}を使ってクエリを絞り込んでください。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorTitle": "クエリは1列を返す必要があります",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.queryNeedsRunningText": "クエリを実行して可能な値のプレビューを取得します。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.runQueryButton": "クエリを実行",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.selectAColumnText": "列を選択",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.title": "値プレビュー",
     "controls.controlGroup.manageControl.displaySettings.titleInputTitle": "ラベル",
     "controls.controlGroup.manageControl.editFlyoutTitle": "コントロールを編集",
@@ -3505,16 +3494,10 @@
     "esql.flyout..applyFlyoutAriaLabel": "変更を適用",
     "esql.flyout..cancelFlyoutAriaLabel": "適用された変更をキャンセル",
     "esql.flyout.cancelLabel": "キャンセル",
-    "esql.flyout.chooseColumnBtn.label": "こちら",
-    "esql.flyout.chooseColumnList.label": "列を選択",
-    "esql.flyout.chooseColumnPopoverLabel": "列を選択してください",
     "esql.flyout.controlTypeOptions.staticValuesLabel": "固定値",
     "esql.flyout.controlTypeOptions.valuesFromQueryLabel": "クエリの値",
     "esql.flyout.controlTypeOptionsOptions.disabledTooltip": "現在、関数やフィールド名を置換できるのは［固定値］タイプのみです。",
     "esql.flyout.controlTypeOptionsOptions.label": "型",
-    "esql.flyout.displayMultipleColsCallout.description": "現在、クエリは{totalColumns}列を返しています。列{chooseColumnPopover}を選択するか、{boldText}を使用します。",
-    "esql.flyout.displayMultipleColsCallout.title": "クエリは1つの列を返す必要があります",
-    "esql.flyout.displayNoValuesForControlCallout.title": "このクエリは値を返していません。編集して、再度実行してください。",
     "esql.flyout.editTitle": "変数コントロールを編集",
     "esql.flyout.experimentalLabel.content": "現在、ES|QL変数はテクニカルプレビュー中です。",
     "esql.flyout.experimentalLabel.title": "テクニカルプレビュー",
@@ -3640,6 +3623,14 @@
     "esqlEditor.visor.sourcesDropdownPopoverLabel": "データソース",
     "esqlEditor.visor.techPreviewTooltip": "テクニカルプレビュー",
     "esqlUtils.columnsErrorMsg": "列を読み込めません。{errorMessage}",
+    "esqlUtils.valuesPreview.emptyText": "このクエリは値を返していません。編集して、再度実行してください。",
+    "esqlUtils.valuesPreview.emptyTitle": "値は返されませんでした",
+    "esqlUtils.valuesPreview.errorTitle": "値のプレビューの取得中にエラーが発生しました",
+    "esqlUtils.valuesPreview.maxText": "最高値",
+    "esqlUtils.valuesPreview.minText": "最小値",
+    "esqlUtils.valuesPreview.multiColumnErrorBody": "クエリは現在{totalColumns}列を返しています。列を選択するか、{statsBy}を使ってクエリを絞り込んでください。",
+    "esqlUtils.valuesPreview.multiColumnErrorTitle": "クエリは1列を返す必要があります",
+    "esqlUtils.valuesPreview.selectAColumnText": "列を選択",
     "esQuery.kql.errors.endOfInputText": "インプットの終わり",
     "esQuery.kql.errors.fieldNameText": "フィールド名",
     "esQuery.kql.errors.literalText": "文字通り",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
index 86e92f519ab73..bcd1125302e3d 100644
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -982,20 +982,9 @@
     "controls.controlGroup.manageControl.dataSource.fieldListErrorTitle": "加载字段列表时出错",
     "controls.controlGroup.manageControl.dataSource.fieldTitle": "字段",
     "controls.controlGroup.manageControl.dataSource.selectDataViewMessage": "请选择数据视图",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.columnsListLabel": "列",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.dataSourceLabel": "数据源",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyText": "此查询未返回任何值。请编辑后再次运行。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.emptyTitle": "没有值返回",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.errorTitle": "获取值预览时出错",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldLabel": "字段",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.fieldTooltipText": "该控件及其提供的选项将基于该字段。此字段由您的查询返回的列确定，例如使用 {statsBy} 或 {rename} 命令。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.maxText": "最大值",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.minText": "最小值",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorBody": "您的查询当前正返回 {totalColumns} 列。选择一列，或使用 {statsBy} 缩小查询范围。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.multiColumnErrorTitle": "查询必须返回单列",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.queryNeedsRunningText": "运行查询以预览可能的值。",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.runQueryButton": "运行查询",
-    "controls.controlGroup.manageControl.dataSource.valuesPreview.selectAColumnText": "选择列",
     "controls.controlGroup.manageControl.dataSource.valuesPreview.title": "值预览",
     "controls.controlGroup.manageControl.displaySettings.titleInputTitle": "标签",
     "controls.controlGroup.manageControl.editFlyoutTitle": "编辑控件",
@@ -3507,16 +3496,10 @@
     "esql.flyout..applyFlyoutAriaLabel": "应用更改",
     "esql.flyout..cancelFlyoutAriaLabel": "取消已应用的更改",
     "esql.flyout.cancelLabel": "取消",
-    "esql.flyout.chooseColumnBtn.label": "此处",
-    "esql.flyout.chooseColumnList.label": "选择列",
-    "esql.flyout.chooseColumnPopoverLabel": "选择一列",
     "esql.flyout.controlTypeOptions.staticValuesLabel": "静态值",
     "esql.flyout.controlTypeOptions.valuesFromQueryLabel": "查询中的值",
     "esql.flyout.controlTypeOptionsOptions.disabledTooltip": "当前，仅[静态值]类型可用于替代函数或字段名称。",
     "esql.flyout.controlTypeOptionsOptions.label": "类型",
-    "esql.flyout.displayMultipleColsCallout.description": "您的查询当前正返回 {totalColumns} 列。选择列 {chooseColumnPopover} 或使用 {boldText}。",
-    "esql.flyout.displayMultipleColsCallout.title": "您的查询必须返回单个列",
-    "esql.flyout.displayNoValuesForControlCallout.title": "此查询未返回任何值。请编辑后再次运行。",
     "esql.flyout.editTitle": "编辑变量控件",
     "esql.flyout.experimentalLabel.content": "ES|QL 变量当前为技术预览状态。",
     "esql.flyout.experimentalLabel.title": "技术预览",
@@ -3642,6 +3625,14 @@
     "esqlEditor.visor.sourcesDropdownPopoverLabel": "数据源",
     "esqlEditor.visor.techPreviewTooltip": "技术预览",
     "esqlUtils.columnsErrorMsg": "无法加载列。{errorMessage}",
+    "esqlUtils.valuesPreview.emptyText": "此查询未返回任何值。请编辑后再次运行。",
+    "esqlUtils.valuesPreview.emptyTitle": "没有值返回",
+    "esqlUtils.valuesPreview.errorTitle": "获取值预览时出错",
+    "esqlUtils.valuesPreview.maxText": "最大值",
+    "esqlUtils.valuesPreview.minText": "最小值",
+    "esqlUtils.valuesPreview.multiColumnErrorBody": "您的查询当前正返回 {totalColumns} 列。选择一列，或使用 {statsBy} 缩小查询范围。",
+    "esqlUtils.valuesPreview.multiColumnErrorTitle": "查询必须返回单列",
+    "esqlUtils.valuesPreview.selectAColumnText": "选择列",
     "esQuery.kql.errors.endOfInputText": "输入结束",
     "esQuery.kql.errors.fieldNameText": "字段名称",
     "esQuery.kql.errors.literalText": "文本",