diff --git a/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.test.ts b/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.test.ts
index 28646c092c01c..826e402b14682 100644
--- a/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.test.ts
+++ b/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.test.ts
@@ -79,6 +79,33 @@ describe('getFormatWithAggs', () => {
     expect(getFormat).toHaveBeenCalledTimes(1);
   });
 
+  test('creates alternative format for range using the template parameter', () => {
+    const mapping = { id: 'range', params: { template: 'arrow_right' } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: 1, lt: 20 })).toBe('1 → 20');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
+  test('handles Infinity values internally when no nestedFormatter is passed', () => {
+    const mapping = { id: 'range', params: { replaceInfinity: true } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: -Infinity, lt: Infinity })).toBe('≥ −∞ and < +∞');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
+  test('lets Infinity values handling to nestedFormatter even when flag is on', () => {
+    const mapping = { id: 'range', params: { replaceInfinity: true, id: 'any' } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: -Infinity, lt: Infinity })).toBe('≥ -Infinity and < Infinity');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
   test('returns custom label for range if provided', () => {
     const mapping = { id: 'range', params: {} };
     const getFieldFormat = getFormatWithAggs(getFormat);
diff --git a/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.ts b/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.ts
index a8134619fec0d..6b03dc5f70edc 100644
--- a/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.ts
+++ b/src/plugins/data/common/search/aggs/utils/get_format_with_aggs.ts
@@ -56,15 +56,35 @@ export function getFormatWithAggs(getFieldFormat: GetFieldFormat): GetFieldForma
             id: nestedFormatter.id,
             params: nestedFormatter.params,
           });
+
           const gte = '\u2265';
           const lt = '\u003c';
+          let fromValue = format.convert(range.gte);
+          let toValue = format.convert(range.lt);
+          // In case of identity formatter and a specific flag, replace Infinity values by specific strings
+          if (params.replaceInfinity && nestedFormatter.id == null) {
+            const FROM_PLACEHOLDER = '\u2212\u221E';
+            const TO_PLACEHOLDER = '+\u221E';
+            fromValue = isFinite(range.gte) ? fromValue : FROM_PLACEHOLDER;
+            toValue = isFinite(range.lt) ? toValue : TO_PLACEHOLDER;
+          }
+
+          if (params.template === 'arrow_right') {
+            return i18n.translate('data.aggTypes.buckets.ranges.rangesFormatMessageArrowRight', {
+              defaultMessage: '{from} → {to}',
+              values: {
+                from: fromValue,
+                to: toValue,
+              },
+            });
+          }
           return i18n.translate('data.aggTypes.buckets.ranges.rangesFormatMessage', {
             defaultMessage: '{gte} {from} and {lt} {to}',
             values: {
               gte,
-              from: format.convert(range.gte),
+              from: fromValue,
               lt,
-              to: format.convert(range.lt),
+              to: toValue,
             },
           });
         });
diff --git a/x-pack/plugins/lens/public/editor_frame_service/format_column.ts b/x-pack/plugins/lens/public/editor_frame_service/format_column.ts
deleted file mode 100644
index 2da6e7195a5e1..0000000000000
--- a/x-pack/plugins/lens/public/editor_frame_service/format_column.ts
+++ /dev/null
@@ -1,100 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { ExpressionFunctionDefinition, Datatable } from 'src/plugins/expressions/public';
-
-interface FormatColumn {
-  format: string;
-  columnId: string;
-  decimals?: number;
-}
-
-const supportedFormats: Record<string, { decimalsToPattern: (decimals?: number) => string }> = {
-  number: {
-    decimalsToPattern: (decimals = 2) => {
-      if (decimals === 0) {
-        return `0,0`;
-      }
-      return `0,0.${'0'.repeat(decimals)}`;
-    },
-  },
-  percent: {
-    decimalsToPattern: (decimals = 2) => {
-      if (decimals === 0) {
-        return `0,0%`;
-      }
-      return `0,0.${'0'.repeat(decimals)}%`;
-    },
-  },
-  bytes: {
-    decimalsToPattern: (decimals = 2) => {
-      if (decimals === 0) {
-        return `0,0b`;
-      }
-      return `0,0.${'0'.repeat(decimals)}b`;
-    },
-  },
-};
-
-export const formatColumn: ExpressionFunctionDefinition<
-  'lens_format_column',
-  Datatable,
-  FormatColumn,
-  Datatable
-> = {
-  name: 'lens_format_column',
-  type: 'datatable',
-  help: '',
-  args: {
-    format: {
-      types: ['string'],
-      help: '',
-      required: true,
-    },
-    columnId: {
-      types: ['string'],
-      help: '',
-      required: true,
-    },
-    decimals: {
-      types: ['number'],
-      help: '',
-    },
-  },
-  inputTypes: ['datatable'],
-  fn(input, { format, columnId, decimals }: FormatColumn) {
-    return {
-      ...input,
-      columns: input.columns.map((col) => {
-        if (col.id === columnId) {
-          if (supportedFormats[format]) {
-            return {
-              ...col,
-              meta: {
-                ...col.meta,
-                params: {
-                  id: format,
-                  params: { pattern: supportedFormats[format].decimalsToPattern(decimals) },
-                },
-              },
-            };
-          } else {
-            return {
-              ...col,
-              meta: {
-                ...col.meta,
-                params: {
-                  id: format,
-                },
-              },
-            };
-          }
-        }
-        return col;
-      }),
-    };
-  },
-};
diff --git a/x-pack/plugins/lens/public/editor_frame_service/service.tsx b/x-pack/plugins/lens/public/editor_frame_service/service.tsx
index e2a382133cb3c..d1df63780594e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/service.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/service.tsx
@@ -23,7 +23,6 @@ import {
 } from '../types';
 import { Document } from '../persistence/saved_object_store';
 import { mergeTables } from './merge_tables';
-import { formatColumn } from './format_column';
 import { EmbeddableFactory, LensEmbeddableStartServices } from './embeddable/embeddable_factory';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { DashboardStart } from '../../../../../src/plugins/dashboard/public';
@@ -86,7 +85,6 @@ export class EditorFrameService {
     getAttributeService: () => Promise<LensAttributeService>
   ): EditorFrameSetup {
     plugins.expressions.registerFunction(() => mergeTables);
-    plugins.expressions.registerFunction(() => formatColumn);
 
     const getStartServices = async (): Promise<LensEmbeddableStartServices> => {
       const [coreStart, deps] = await core.getStartServices();
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
index 310548e5ab817..9500d4b44b79e 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
@@ -435,7 +435,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
             />
           )}
 
-          {selectedColumn && selectedColumn.dataType === 'number' ? (
+          {selectedColumn &&
+          (selectedColumn.dataType === 'number' || selectedColumn.operationType === 'range') ? (
             <FormatSelector
               selectedColumn={selectedColumn}
               onChange={(newFormat) => {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/format_column.ts b/x-pack/plugins/lens/public/indexpattern_datasource/format_column.ts
new file mode 100644
index 0000000000000..3666528f43166
--- /dev/null
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/format_column.ts
@@ -0,0 +1,137 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ExpressionFunctionDefinition,
+  Datatable,
+  DatatableColumn,
+} from 'src/plugins/expressions/public';
+
+interface FormatColumn {
+  format: string;
+  columnId: string;
+  decimals?: number;
+  parentFormat?: string;
+}
+
+export const supportedFormats: Record<
+  string,
+  { decimalsToPattern: (decimals?: number) => string }
+> = {
+  number: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0`;
+      }
+      return `0,0.${'0'.repeat(decimals)}`;
+    },
+  },
+  percent: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0%`;
+      }
+      return `0,0.${'0'.repeat(decimals)}%`;
+    },
+  },
+  bytes: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0b`;
+      }
+      return `0,0.${'0'.repeat(decimals)}b`;
+    },
+  },
+};
+
+export const formatColumn: ExpressionFunctionDefinition<
+  'lens_format_column',
+  Datatable,
+  FormatColumn,
+  Datatable
+> = {
+  name: 'lens_format_column',
+  type: 'datatable',
+  help: '',
+  args: {
+    format: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    columnId: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    decimals: {
+      types: ['number'],
+      help: '',
+    },
+    parentFormat: {
+      types: ['string'],
+      help: '',
+    },
+  },
+  inputTypes: ['datatable'],
+  fn(input, { format, columnId, decimals, parentFormat }: FormatColumn) {
+    return {
+      ...input,
+      columns: input.columns.map((col) => {
+        if (col.id === columnId) {
+          if (!parentFormat) {
+            if (supportedFormats[format]) {
+              return withParams(col, {
+                id: format,
+                params: { pattern: supportedFormats[format].decimalsToPattern(decimals) },
+              });
+            } else if (format) {
+              return withParams(col, { id: format });
+            } else {
+              return col;
+            }
+          }
+
+          const parsedParentFormat = JSON.parse(parentFormat);
+          const parentFormatId = parsedParentFormat.id;
+          const parentFormatParams = parsedParentFormat.params ?? {};
+
+          if (!parentFormatId) {
+            return col;
+          }
+
+          if (format && supportedFormats[format]) {
+            return withParams(col, {
+              id: parentFormatId,
+              params: {
+                id: format,
+                params: {
+                  pattern: supportedFormats[format].decimalsToPattern(decimals),
+                },
+                ...parentFormatParams,
+              },
+            });
+          }
+          if (parentFormatParams) {
+            const innerParams = (col.meta.params?.params as Record<string, unknown>) ?? {};
+            return withParams(col, {
+              ...col.meta.params,
+              params: {
+                ...innerParams,
+                ...parentFormatParams,
+              },
+            });
+          }
+        }
+        return col;
+      }),
+    };
+  },
+};
+
+function withParams(col: DatatableColumn, params: Record<string, unknown>) {
+  return { ...col, meta: { ...col.meta, params } };
+}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/index.ts b/x-pack/plugins/lens/public/indexpattern_datasource/index.ts
index 4fbed04112632..35987656f6670 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/index.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/index.ts
@@ -33,8 +33,11 @@ export class IndexPatternDatasource {
     { expressions, editorFrame, charts }: IndexPatternDatasourceSetupPlugins
   ) {
     editorFrame.registerDatasource(async () => {
-      const { getIndexPatternDatasource, renameColumns } = await import('../async_services');
+      const { getIndexPatternDatasource, renameColumns, formatColumn } = await import(
+        '../async_services'
+      );
       expressions.registerFunction(renameColumns);
+      expressions.registerFunction(formatColumn);
       return core.getStartServices().then(([coreStart, { data }]) =>
         getIndexPatternDatasource({
           core: coreStart,
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
index 28aeac223e4a6..a6edfd71c93ca 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
@@ -107,6 +107,7 @@ export function uniqueLabels(layers: Record<string, IndexPatternLayer>) {
 }
 
 export * from './rename_columns';
+export * from './format_column';
 
 export function getIndexPatternDatasource({
   core,
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts
index 06cfdf7e03481..4222c02388433 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts
@@ -117,6 +117,7 @@ const indexPattern2 = ({
   title: 'my-fake-restricted-pattern',
   timeFieldName: 'timestamp',
   hasRestrictions: true,
+  fieldFormatMap: { bytes: { id: 'bytes', params: { pattern: '0.0' } } },
   fields: [
     {
       name: 'timestamp',
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
index fd8e071d524ee..70079cce6cc46 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
@@ -103,7 +103,14 @@ export async function loadIndexPatterns({
         id: indexPattern.id!, // id exists for sure because we got index patterns by id
         title,
         timeFieldName,
-        fieldFormatMap,
+        fieldFormatMap:
+          fieldFormatMap &&
+          Object.fromEntries(
+            Object.entries(fieldFormatMap).map(([id, format]) => [
+              id,
+              'toJSON' in format ? format.toJSON() : format,
+            ])
+          ),
         fields: newFields,
         hasRestrictions: !!typeMeta?.aggs,
       };
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts b/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts
index 21ed23321cf57..744a9f6743d09 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/mocks.ts
@@ -82,6 +82,7 @@ export const createMockedRestrictedIndexPattern = () => ({
   title: 'my-fake-restricted-pattern',
   timeFieldName: 'timestamp',
   hasRestrictions: true,
+  fieldFormatMap: { bytes: { id: 'bytes', params: { pattern: '0.0' } } },
   fields: [
     {
       name: 'timestamp',
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.scss b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.scss
index b1658043f3204..4af490e7479da 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.scss
@@ -3,4 +3,8 @@
   @include euiFontSizeS;
   min-height: $euiSizeXL;
   width: 100%;
-}
\ No newline at end of file
+}
+
+.lnsRangesOperation__popoverNumberField {
+  width: 14ch; // Roughly 10 characters plus extra for the padding
+}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx
index 96f4120e3df78..c6773e806aef8 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx
@@ -20,8 +20,8 @@ import {
   EuiPopover,
   EuiToolTip,
   htmlIdGenerator,
+  keys,
 } from '@elastic/eui';
-import { keys } from '@elastic/eui';
 import { IFieldFormat } from '../../../../../../../../src/plugins/data/common';
 import { RangeTypeLens, isValidRange, isValidNumber } from './ranges';
 import { FROM_PLACEHOLDER, TO_PLACEHOLDER, TYPING_DEBOUNCE_TIME } from './constants';
@@ -39,8 +39,8 @@ type LocalRangeType = RangeTypeLens & { id: string };
 const getBetterLabel = (range: RangeTypeLens, formatter: IFieldFormat) =>
   range.label ||
   formatter.convert({
-    gte: isValidNumber(range.from) ? range.from : FROM_PLACEHOLDER,
-    lt: isValidNumber(range.to) ? range.to : TO_PLACEHOLDER,
+    gte: isValidNumber(range.from) ? range.from : -Infinity,
+    lt: isValidNumber(range.to) ? range.to : Infinity,
   });
 
 export const RangePopover = ({
@@ -55,7 +55,6 @@ export const RangePopover = ({
   Button: React.FunctionComponent<{ onClick: MouseEventHandler }>;
   isOpenByCreation: boolean;
   setIsOpenByCreation: (open: boolean) => void;
-  formatter: IFieldFormat;
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [tempRange, setTempRange] = useState(range);
@@ -112,6 +111,7 @@ export const RangePopover = ({
         <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
           <EuiFlexItem>
             <EuiFieldNumber
+              className="lnsRangesOperation__popoverNumberField"
               value={isValidNumber(from) ? Number(from) : ''}
               onChange={({ target }) => {
                 const newRange = {
@@ -126,7 +126,6 @@ export const RangePopover = ({
                   <EuiText size="s">{lteAppendLabel}</EuiText>
                 </EuiToolTip>
               }
-              fullWidth
               compressed
               placeholder={FROM_PLACEHOLDER}
               isInvalid={!isValidRange(tempRange)}
@@ -137,6 +136,7 @@ export const RangePopover = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiFieldNumber
+              className="lnsRangesOperation__popoverNumberField"
               value={isValidNumber(to) ? Number(to) : ''}
               onChange={({ target }) => {
                 const newRange = {
@@ -151,7 +151,6 @@ export const RangePopover = ({
                   <EuiText size="s">{ltPrependLabel}</EuiText>
                 </EuiToolTip>
               }
-              fullWidth
               compressed
               placeholder={TO_PLACEHOLDER}
               isInvalid={!isValidRange(tempRange)}
@@ -180,6 +179,7 @@ export const RangePopover = ({
             { defaultMessage: 'Custom label' }
           )}
           onSubmit={onSubmit}
+          compressed
           dataTestSubj="indexPattern-ranges-label"
         />
       </EuiFormRow>
@@ -284,7 +284,6 @@ export const AdvancedRangeEditor = ({
                   }
                   setLocalRanges(newRanges);
                 }}
-                formatter={formatter}
                 Button={({ onClick }: { onClick: MouseEventHandler }) => (
                   <EuiLink
                     color="text"
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx
index 5317ee913fcdd..c8a8ffa7b128f 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx
@@ -7,7 +7,14 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { EuiFieldNumber, EuiRange, EuiButtonEmpty, EuiLink } from '@elastic/eui';
+import {
+  EuiFieldNumber,
+  EuiRange,
+  EuiButtonEmpty,
+  EuiLink,
+  EuiText,
+  EuiFieldText,
+} from '@elastic/eui';
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { IndexPatternPrivateState, IndexPattern } from '../../../types';
@@ -23,12 +30,21 @@ import {
 } from './constants';
 import { RangePopover } from './advanced_editor';
 import { DragDropBuckets } from '../shared_components';
-import { EuiFieldText } from '@elastic/eui';
 
 const dataPluginMockValue = dataPluginMock.createStartContract();
 // need to overwrite the formatter field first
-dataPluginMockValue.fieldFormats.deserialize = jest.fn().mockImplementation(() => {
-  return { convert: ({ gte, lt }: { gte: string; lt: string }) => `${gte} - ${lt}` };
+dataPluginMockValue.fieldFormats.deserialize = jest.fn().mockImplementation(({ params }) => {
+  return {
+    convert: ({ gte, lt }: { gte: string; lt: string }) => {
+      if (params?.id === 'custom') {
+        return `Custom format: ${gte} - ${lt}`;
+      }
+      if (params?.id === 'bytes') {
+        return `Bytes format: ${gte} - ${lt}`;
+      }
+      return `${gte} - ${lt}`;
+    },
+  };
 });
 
 type ReactMouseEvent = React.MouseEvent<HTMLAnchorElement, MouseEvent> &
@@ -74,7 +90,14 @@ describe('ranges', () => {
   function getDefaultState(): IndexPatternPrivateState {
     return {
       indexPatternRefs: [],
-      indexPatterns: {},
+      indexPatterns: {
+        '1': {
+          id: '1',
+          title: 'my_index_pattern',
+          hasRestrictions: false,
+          fields: [{ name: sourceField, type: 'number', displayName: sourceField }],
+        },
+      },
       existingFields: {},
       currentIndexPatternId: '1',
       isFirstExistenceFetch: false,
@@ -396,7 +419,7 @@ describe('ranges', () => {
           />
         );
 
-        // This series of act clojures are made to make it work properly the update flush
+        // This series of act closures are made to make it work properly the update flush
         act(() => {
           instance.find(EuiButtonEmpty).prop('onClick')!({} as ReactMouseEvent);
         });
@@ -453,7 +476,7 @@ describe('ranges', () => {
           />
         );
 
-        // This series of act clojures are made to make it work properly the update flush
+        // This series of act closures are made to make it work properly the update flush
         act(() => {
           instance.find(EuiButtonEmpty).prop('onClick')!({} as ReactMouseEvent);
         });
@@ -510,7 +533,7 @@ describe('ranges', () => {
           />
         );
 
-        // This series of act clojures are made to make it work properly the update flush
+        // This series of act closures are made to make it work properly the update flush
         act(() => {
           instance.find(RangePopover).find(EuiLink).prop('onClick')!({} as ReactMouseEvent);
         });
@@ -667,6 +690,60 @@ describe('ranges', () => {
           );
         });
       });
+
+      it('should correctly handle the default formatter for the field', () => {
+        const setStateSpy = jest.fn();
+
+        // set a default formatter for the sourceField used
+        state.indexPatterns['1'].fieldFormatMap = {
+          MyField: { id: 'custom', params: {} },
+        };
+
+        const instance = mount(
+          <InlineOptions
+            {...defaultOptions}
+            state={state}
+            setState={setStateSpy}
+            columnId="col1"
+            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
+            layerId="first"
+          />
+        );
+
+        expect(instance.find(RangePopover).find(EuiText).prop('children')).toMatch(
+          /^Custom format:/
+        );
+      });
+
+      it('should correctly pick the dimension formatter for the field', () => {
+        const setStateSpy = jest.fn();
+
+        // set a default formatter for the sourceField used
+        state.indexPatterns['1'].fieldFormatMap = {
+          MyField: { id: 'custom', params: {} },
+        };
+
+        // now set a format on the range operation
+        (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.format = {
+          id: 'bytes',
+          params: { decimals: 0 },
+        };
+
+        const instance = mount(
+          <InlineOptions
+            {...defaultOptions}
+            state={state}
+            setState={setStateSpy}
+            columnId="col1"
+            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
+            layerId="first"
+          />
+        );
+
+        expect(instance.find(RangePopover).find(EuiText).prop('children')).toMatch(
+          /^Bytes format:/
+        );
+      });
     });
   });
 });
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx
index a256f5e4ecfa1..1050eef45a71c 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx
@@ -13,7 +13,9 @@ import { RangeEditor } from './range_editor';
 import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
 import { updateColumnParam, changeColumn } from '../../../state_helpers';
+import { supportedFormats } from '../../../format_column';
 import { MODES, AUTO_BARS, DEFAULT_INTERVAL, MIN_HISTOGRAM_BARS, SLICES } from './constants';
+import { IndexPattern, IndexPatternField } from '../../../types';
 
 type RangeType = Omit<Range, 'type'>;
 // Try to cover all possible serialized states for ranges
@@ -32,6 +34,11 @@ export interface RangeIndexPatternColumn extends FieldBasedIndexPatternColumn {
     type: MODES_TYPES;
     maxBars: typeof AUTO_BARS | number;
     ranges: RangeTypeLens[];
+    format?: { id: string; params?: { decimals: number } };
+    parentFormat?: {
+      id: string;
+      params?: { id?: string; template?: string; replaceInfinity?: boolean };
+    };
   };
 }
 
@@ -55,6 +62,15 @@ export const isValidRange = (range: RangeTypeLens): boolean => {
   return true;
 };
 
+function getFieldDefaultFormat(indexPattern: IndexPattern, field: IndexPatternField | undefined) {
+  if (field) {
+    if (indexPattern.fieldFormatMap && indexPattern.fieldFormatMap[field.name]) {
+      return indexPattern.fieldFormatMap[field.name];
+    }
+  }
+  return undefined;
+}
+
 function getEsAggsParams({ sourceField, params }: RangeIndexPatternColumn) {
   if (params.type === MODES.Range) {
     return {
@@ -105,7 +121,7 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
       };
     }
   },
-  buildColumn({ suggestedPriority, field }) {
+  buildColumn({ suggestedPriority, indexPattern, field }) {
     return {
       label: field.name,
       dataType: 'number', // string for Range
@@ -118,6 +134,8 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
         type: MODES.Histogram,
         ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
         maxBars: AUTO_BARS,
+        format: undefined,
+        parentFormat: undefined,
       },
     };
   },
@@ -149,7 +167,26 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
     };
   },
   paramEditor: ({ state, setState, currentColumn, layerId, columnId, uiSettings, data }) => {
-    const rangeFormatter = data.fieldFormats.deserialize({ id: 'range' });
+    const indexPattern = state.indexPatterns[state.layers[layerId].indexPatternId];
+    const currentField = indexPattern.fields.find(
+      (field) => field.name === currentColumn.sourceField
+    );
+    const numberFormat = currentColumn.params.format;
+    const numberFormatterPattern =
+      numberFormat &&
+      supportedFormats[numberFormat.id] &&
+      supportedFormats[numberFormat.id].decimalsToPattern(numberFormat.params?.decimals || 0);
+
+    const rangeFormatter = data.fieldFormats.deserialize({
+      ...currentColumn.params.parentFormat,
+      params: {
+        ...currentColumn.params.parentFormat?.params,
+        ...(numberFormat
+          ? { id: numberFormat.id, params: { pattern: numberFormatterPattern } }
+          : getFieldDefaultFormat(indexPattern, currentField)),
+      },
+    });
+
     const MAX_HISTOGRAM_BARS = uiSettings.get(UI_SETTINGS.HISTOGRAM_MAX_BARS);
     const granularityStep = (MAX_HISTOGRAM_BARS - MIN_HISTOGRAM_BARS) / SLICES;
     const maxBarsDefaultValue = (MAX_HISTOGRAM_BARS - MIN_HISTOGRAM_BARS) / 2;
@@ -171,6 +208,10 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
     const onChangeMode = (newMode: MODES_TYPES) => {
       const scale = newMode === MODES.Range ? 'ordinal' : 'interval';
       const dataType = newMode === MODES.Range ? 'string' : 'number';
+      const parentFormat =
+        newMode === MODES.Range
+          ? { id: 'range', params: { template: 'arrow_right', replaceInfinity: true } }
+          : undefined;
       setState(
         changeColumn({
           state,
@@ -184,6 +225,8 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
               type: newMode,
               ranges: [{ from: 0, to: DEFAULT_INTERVAL, label: '' }],
               maxBars: maxBarsDefaultValue,
+              format: undefined,
+              parentFormat,
             },
           },
           keepParams: false,
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/label_input.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/label_input.tsx
index 882169c0675b0..09a98d9e48ef7 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/label_input.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/label_input.tsx
@@ -16,6 +16,7 @@ export const LabelInput = ({
   inputRef,
   onSubmit,
   dataTestSubj,
+  compressed,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -23,6 +24,7 @@ export const LabelInput = ({
   inputRef?: React.MutableRefObject<HTMLInputElement | undefined>;
   onSubmit?: () => void;
   dataTestSubj?: string;
+  compressed?: boolean;
 }) => {
   const [inputValue, setInputValue] = useState(value);
 
@@ -57,6 +59,7 @@ export const LabelInput = ({
       prepend={i18n.translate('xpack.lens.labelInput.label', {
         defaultMessage: 'Label',
       })}
+      compressed={compressed}
     />
   );
 };
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts b/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts
index 1b87c48dc7193..e2c4323b56c2a 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/to_expression.ts
@@ -63,32 +63,50 @@ function getExpressionForLayer(
       };
     }, {} as Record<string, OriginalColumn>);
 
-    type FormattedColumn = Required<Extract<IndexPatternColumn, { params?: { format: unknown } }>>;
+    type FormattedColumn = Required<
+      Extract<
+        IndexPatternColumn,
+        | {
+            params?: {
+              format: unknown;
+            };
+          }
+        // when formatters are nested there's a slightly different format
+        | {
+            params: {
+              format?: unknown;
+              parentFormat?: unknown;
+            };
+          }
+      >
+    >;
 
     const columnsWithFormatters = columnEntries.filter(
-      ([, col]) => col.params && 'format' in col.params && col.params.format
+      ([, col]) =>
+        col.params &&
+        (('format' in col.params && col.params.format) ||
+          ('parentFormat' in col.params && col.params.parentFormat))
     ) as Array<[string, FormattedColumn]>;
-    const formatterOverrides: ExpressionFunctionAST[] = columnsWithFormatters.map(([id, col]) => {
-      const format = (col as FormattedColumn).params!.format;
-      const base: ExpressionFunctionAST = {
-        type: 'function',
-        function: 'lens_format_column',
-        arguments: {
-          format: [format.id],
-          columnId: [id],
-        },
-      };
-      if (typeof format.params?.decimals === 'number') {
-        return {
-          ...base,
+    const formatterOverrides: ExpressionFunctionAST[] = columnsWithFormatters.map(
+      ([id, col]: [string, FormattedColumn]) => {
+        // TODO: improve the type handling here
+        const parentFormat = 'parentFormat' in col.params ? col.params!.parentFormat! : undefined;
+        const format = (col as FormattedColumn).params!.format;
+
+        const base: ExpressionFunctionAST = {
+          type: 'function',
+          function: 'lens_format_column',
           arguments: {
-            ...base.arguments,
-            decimals: [format.params.decimals],
+            format: format ? [format.id] : [''],
+            columnId: [id],
+            decimals: typeof format?.params?.decimals === 'number' ? [format.params.decimals] : [],
+            parentFormat: parentFormat ? [JSON.stringify(parentFormat)] : [],
           },
         };
+
+        return base;
       }
-      return base;
-    });
+    );
 
     const allDateHistogramFields = Object.values(columns)
       .map((column) =>