diff --git a/packages/changeset-form/addon/components/eui-changeset-form/fields/field-dual-range-slider/index.hbs b/packages/changeset-form/addon/components/eui-changeset-form/fields/field-dual-range-slider/index.hbs
index 19836c90d..73c82dbbb 100644
--- a/packages/changeset-form/addon/components/eui-changeset-form/fields/field-dual-range-slider/index.hbs
+++ b/packages/changeset-form/addon/components/eui-changeset-form/fields/field-dual-range-slider/index.hbs
@@ -45,8 +45,8 @@
       @inputRef={{@inputRef}}
       @controlOnly={{@controlOnly}}
       @autoSize={{@autoSize}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       @isFakeMinBlock={{not (has-block "min")}}
       @isFakeMaxBlock={{not (has-block "max")}}
       disabled={{@disabled}}
@@ -67,4 +67,4 @@
       </:append>
     </EuiDualRange>
   </EuiFormRow>
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/changeset-form/addon/components/eui-changeset-form/fields/field-number/index.hbs b/packages/changeset-form/addon/components/eui-changeset-form/fields/field-number/index.hbs
index 15507332a..54a32af20 100644
--- a/packages/changeset-form/addon/components/eui-changeset-form/fields/field-number/index.hbs
+++ b/packages/changeset-form/addon/components/eui-changeset-form/fields/field-number/index.hbs
@@ -34,8 +34,8 @@
       {{!template-lint-disable}}
       @id={{theId}}
       @disabled={{@disabled}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       autofocus={{@autofocus}}
       placeholder={{@placeholder}}
       {{on "blur" this.validate}}
@@ -50,4 +50,4 @@
       </:append>
     </EuiFieldNumber>
   </EuiFormRow>
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/changeset-form/addon/components/eui-changeset-form/fields/field-range-slider/index.hbs b/packages/changeset-form/addon/components/eui-changeset-form/fields/field-range-slider/index.hbs
index 3a09f83fc..5702df43a 100644
--- a/packages/changeset-form/addon/components/eui-changeset-form/fields/field-range-slider/index.hbs
+++ b/packages/changeset-form/addon/components/eui-changeset-form/fields/field-range-slider/index.hbs
@@ -45,8 +45,8 @@
       @inputRef={{@inputRef}}
       @controlOnly={{@controlOnly}}
       @autoSize={{@autoSize}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       @isFakeMinBlock={{not (has-block "min")}}
       @isFakeMaxBlock={{not (has-block "max")}}
       @isFakeValueBlock={{not (has-block "value")}}
@@ -80,4 +80,4 @@
       </:append>
     </EuiRange>
   </EuiFormRow>
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/core/addon/components/eui-dual-range/index.hbs b/packages/core/addon/components/eui-dual-range/index.hbs
index f2985712c..5ff4494a9 100644
--- a/packages/core/addon/components/eui-dual-range/index.hbs
+++ b/packages/core/addon/components/eui-dual-range/index.hbs
@@ -1,10 +1,9 @@
 {{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
   (and (not (arg-or-default @isFakeMaxBlock false)) (has-block "max"))
-  (and
-    (not (arg-or-default @isFakeMinBlock false)) (has-block "min")
-  ) as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
+  (and (not (arg-or-default @isFakeMinBlock false)) (has-block "min"))
+  as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
 }}
   {{#if this.showInputOnly}}
     <EuiInputPopover
@@ -44,8 +43,8 @@
               @autoSize={{false}}
               @fullWidth={{this.fullWidth}}
               @isInvalid={{@isInvalid}}
-              @isFakeAppendBlock={{hasPrepend}}
-              @isFakePrependBlock={{hasAppend}}
+              @isPrependProvided={{hasAppend}}
+              @isAppendProvided={{hasPrepend}}
               @controlOnly={{true}}
               @disable={{@disable}}
               ...attributes
@@ -60,11 +59,16 @@
                 (if this.canShowDropdown this.onInputBlur (optional @onBlur))
               }}
               {{on "input" this.handleLowerInputChange}}
-            />
-            <div class="euiRange__horizontalSpacer"></div>
+            >
+              <:prepend as |classes|>
+                {{yield classes to="prepend"}}
+              </:prepend>
+              <:append as |classes|>
+                {{yield classes to="append"}}
+              </:append>
+            </EuiRangeInput>
           </:startControl>
           <:endControl as |classes|>
-            <div class="euiRange__horizontalSpacer"></div>
             <EuiRangeInput
               class={{classes}}
               aria-label={{@maxInputProps.ariaLabel}}
@@ -81,8 +85,8 @@
               @autoSize={{false}}
               @fullWidth={{this.fullWidth}}
               @isInvalid={{@isInvalid}}
-              @isFakeAppendBlock={{hasPrepend}}
-              @isFakePrependBlock={{hasAppend}}
+              @isPrependProvided={{hasAppend}}
+              @isAppendProvided={{hasPrepend}}
               @controlOnly={{true}}
               @disable={{@disable}}
               ...attributes
@@ -97,7 +101,14 @@
                 (if this.canShowDropdown this.onInputBlur (optional @onBlur))
               }}
               {{on "input" this.handleUpperInputChange}}
-            />
+            >
+              <:prepend as |classes|>
+                {{yield classes to="prepend"}}
+              </:prepend>
+              <:append as |classes|>
+                {{yield classes to="append"}}
+              </:append>
+            </EuiRangeInput>
           </:endControl>
           <:append as |appendClasses|>
             {{yield appendClasses to="append"}}
@@ -109,6 +120,7 @@
           class="euiDualRange"
           @fullWidth={{this.fullWidth}}
           @compressed={{this.compressed}}
+          @showInput={{this.showInput}}
         >
           {{#if this.showLabels}}
             <EuiRangeLabel @side="min" @disabled={{@disabled}}>
@@ -231,8 +243,8 @@
           @readOnly={{@readOnly}}
           @fullWidth={{this.fullWidth}}
           @isInvalid={{@isInvalid}}
-          @isFakeAppendBlock={{true}}
-          @isFakePrependBlock={{true}}
+          @isPrependProvided={{false}}
+          @isAppendProvided={{false}}
           @controlOnly={{true}}
           @disable={{@disable}}
           ...attributes
@@ -357,8 +369,8 @@
           @fullWidth={{this.fullWidth}}
           @isInvalid={{@isInvalid}}
           @controlOnly={{this.showInputOnly}}
-          @isFakeAppendBlock={{true}}
-          @isFakePrependBlock={{true}}
+          @isPrependProvided={{false}}
+          @isAppendProvided={{false}}
           @disable={{@disable}}
           ...attributes
           {{on-key "_all" this.handleInputKeyDown}}
@@ -369,4 +381,4 @@
       {{/if}}
     </EuiRangeWrapper>
   {{/if}}
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/core/addon/components/eui-dual-range/index.ts b/packages/core/addon/components/eui-dual-range/index.ts
index f6dbc9f1b..b1fc6ee37 100644
--- a/packages/core/addon/components/eui-dual-range/index.ts
+++ b/packages/core/addon/components/eui-dual-range/index.ts
@@ -13,6 +13,7 @@ import { EuiRangeTick } from '../eui-range-ticks';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { later } from '@ember/runloop';
 import { keys } from '../../utils/keys';
+import { EUI_THUMB_SIZE } from '../../utils/range';
 type ValueMember = number | string;
 
 export interface EuiDualRangeArgs
@@ -177,16 +178,28 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
     // Determine thumb movement based on slider interaction
     if (!this.isValid) {
       // Non-standard positioning follows
-      this._determineInvalidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
+      this._determineInvalidThumbMovement(
+        newVal,
+        this.lowerValue,
+        this.upperValue,
+        e
+      );
     } else {
       // Standard positioning based on click event proximity to thumb locations
-      this._determineValidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
+      this._determineValidThumbMovement(
+        newVal,
+        this.lowerValue,
+        this.upperValue,
+        e
+      );
     }
   }
 
   @action
   _handleOnChange(lower: ValueMember, upper: ValueMember, e: Event): void {
-    const isValid = isWithinRange(this.min, upper, lower) && isWithinRange(lower, this.max, upper);
+    const isValid =
+      isWithinRange(this.min, upper, lower) &&
+      isWithinRange(lower, this.max, upper);
     this.args.onChange([lower, upper], isValid, e);
   }
 
@@ -198,15 +211,23 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
   @action
   _resetToRangeEnds(e: KeyboardEvent): void {
     // Arbitrary decision to pass `min` instead of `max`. Result is the same.
-    this._determineInvalidThumbMovement(this.min, this.lowerValue, this.upperValue, e);
+    this._determineInvalidThumbMovement(
+      this.min,
+      this.lowerValue,
+      this.upperValue,
+      e
+    );
   }
 
   @action
   _isDirectionalKeyPress(event: KeyboardEvent): boolean {
     return (
-      [keys.ARROW_UP, keys.ARROW_RIGHT, keys.ARROW_DOWN, keys.ARROW_LEFT].indexOf(
-        event.key as keys
-      ) > -1
+      [
+        keys.ARROW_UP,
+        keys.ARROW_RIGHT,
+        keys.ARROW_DOWN,
+        keys.ARROW_LEFT
+      ].indexOf(event.key as keys) > -1
     );
   }
 
@@ -303,7 +324,6 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
     let valuePosition = decimal <= 1 ? decimal : 1;
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
-    const EUI_THUMB_SIZE = 16;
     const trackWidth =
       this.args.showInput === 'inputWithPopover' && !!width
         ? width
@@ -325,11 +345,17 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
   }
 
   get calculateLowerValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(Number(this.lowerValue) || this.min, this.rangeWidth);
+    return this.calculateThumbPositionStyle(
+      Number(this.lowerValue) || this.min,
+      this.rangeWidth
+    );
   }
 
   get calculateUpperValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(Number(this.upperValue) || this.max, this.rangeWidth);
+    return this.calculateThumbPositionStyle(
+      Number(this.upperValue) || this.max,
+      this.rangeWidth
+    );
   }
 
   @action
diff --git a/packages/core/addon/components/eui-field-number/index.hbs b/packages/core/addon/components/eui-field-number/index.hbs
index 4a82186db..5ae0c973d 100644
--- a/packages/core/addon/components/eui-field-number/index.hbs
+++ b/packages/core/addon/components/eui-field-number/index.hbs
@@ -1,6 +1,6 @@
 {{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
   (arg-or-default @id (unique-id)) as |hasPrepend hasAppend inputId|
 }}
   {{#let
@@ -59,4 +59,4 @@
       </EuiFormControlLayout>
     {{/if}}
   {{/let}}
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/core/addon/components/eui-input-popover/index.ts b/packages/core/addon/components/eui-input-popover/index.ts
index 8ba09b22f..4a7f51c0e 100644
--- a/packages/core/addon/components/eui-input-popover/index.ts
+++ b/packages/core/addon/components/eui-input-popover/index.ts
@@ -6,7 +6,8 @@ import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-defa
 import { tabbable } from 'tabbable';
 import { EuiPopoverArgs } from '../eui-popover';
 
-export interface EuiInputPopoverArgs extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
+export interface EuiInputPopoverArgs
+  extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
   disableFocusTrap?: boolean;
   fullWidth?: boolean;
   input: EuiPopoverArgs['button'];
@@ -44,8 +45,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
   @action
   setPanelWidth(width?: number): void {
     const { panel, inputWidth } = this;
-    if (panel && (!!inputWidth || !!width)) {
-      const newWidth = !width ? width : inputWidth;
+    const newWidth = width || inputWidth;
+    if (panel && !!newWidth) {
       panel.style.width = `${newWidth}px`;
       this.args.onPanelResize?.(newWidth);
     }
@@ -74,7 +75,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
       });
       if (
         this.args.disableFocusTrap ||
-        (tabbableItems.length && tabbableItems[tabbableItems.length - 1] === document.activeElement)
+        (tabbableItems.length &&
+          tabbableItems[tabbableItems.length - 1] === document.activeElement)
       ) {
         this.args.closePopover?.();
       }
diff --git a/packages/core/addon/components/eui-range-input/index.hbs b/packages/core/addon/components/eui-range-input/index.hbs
index 4d034f195..e0a6b3684 100644
--- a/packages/core/addon/components/eui-range-input/index.hbs
+++ b/packages/core/addon/components/eui-range-input/index.hbs
@@ -1,32 +1,38 @@
-<EuiFieldNumber
-  class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
-  name={{@name}}
-  min={{cast-to @min to="number"}}
-  max={{cast-to @max to="number"}}
-  @step={{@step}}
-  @value={{if (eq @value "") "" (cast-to @value to="number")}}
-  @disabled={{@disabled}}
-  @compressed={{@compressed}}
-  @fullWidth={{@fullWidth}}
-  @controlOnly={{@controlOnly}}
-  @isFakeAppendBlock={{@isFakeAppendBlock}}
-  @isFakePrependBlock={{@isFakePrependBlock}}
-  @isInvalid={{@isInvalid}}
-  @disable={{@disable}}
-  ...attributes
-  {{simple-style
-    (inline-styles
-      componentName="EuiRangeInput"
-      componentArgs=(hash
-        autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
+{{#let
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
+  as |hasAppend hasPrepend|
+}}
+  <EuiFieldNumber
+    class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
+    name={{@name}}
+    min={{cast-to @min to="number"}}
+    max={{cast-to @max to="number"}}
+    @step={{@step}}
+    @value={{if (eq @value "") "" (cast-to @value to="number")}}
+    @disabled={{@disabled}}
+    @compressed={{@compressed}}
+    @fullWidth={{@fullWidth}}
+    @controlOnly={{@controlOnly}}
+    @isPrependProvided={{hasAppend}}
+    @isAppendProvided={{hasPrepend}}
+    @isInvalid={{@isInvalid}}
+    @disable={{@disable}}
+    ...attributes
+    {{simple-style
+      (inline-styles
+        componentName="EuiRangeInput"
+        componentArgs=(hash
+          autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
+        )
       )
-    )
-  }}
->
-  <:prepend as |classes|>
-    {{yield classes to="prepend"}}
-  </:prepend>
-  <:append as |classes|>
-    {{yield classes to="append"}}
-  </:append>
-</EuiFieldNumber>
\ No newline at end of file
+    }}
+  >
+    <:prepend as |classes|>
+      {{yield classes to="prepend"}}
+    </:prepend>
+    <:append as |classes|>
+      {{yield classes to="append"}}
+    </:append>
+  </EuiFieldNumber>
+{{/let}}
diff --git a/packages/core/addon/components/eui-range-levels/index.hbs b/packages/core/addon/components/eui-range-levels/index.hbs
index dcc1eb6c7..81f9cb486 100644
--- a/packages/core/addon/components/eui-range-levels/index.hbs
+++ b/packages/core/addon/components/eui-range-levels/index.hbs
@@ -2,7 +2,7 @@
   class={{class-names
     "euiRangeLevels"
     (if @showTicks "euiRangeLevels--hasTicks")
-    (if @compresses "euiRangeLevels--compressed")
+    (if @compressed "euiRangeLevels--compressed")
   }}
   {{did-insert this.validateLevels}}
   {{did-update this.validateLevels @levels}}
@@ -14,9 +14,9 @@
       class="euiRangeLevel euiRangeLevel--{{level.color}}"
       {{simple-style
         (inline-styles
-          componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min)
+          componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min trackWidth=@trackWidth)
         )
       }}
     ></span>
   {{/each}}
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/core/addon/components/eui-range-ticks/index.hbs b/packages/core/addon/components/eui-range-ticks/index.hbs
index f9ad83cf3..5e114fe4e 100644
--- a/packages/core/addon/components/eui-range-ticks/index.hbs
+++ b/packages/core/addon/components/eui-range-ticks/index.hbs
@@ -5,7 +5,7 @@
 >
   {{#each @tickSequence key="value" as |tickValue|}}
     {{#let
-      (get-range-tick @ticks tickValue @min @max this.percentageWidth) as |derivedState|
+      (get-range-tick @ticks tickValue @min @max this.percentageWidth @trackWidth) as |derivedState|
     }}
       <button
         type="button"
@@ -24,4 +24,4 @@
       </button>
     {{/let}}
   {{/each}}
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/core/addon/components/eui-range-track/index.hbs b/packages/core/addon/components/eui-range-track/index.hbs
index ce84b06a0..4acaa4a81 100644
--- a/packages/core/addon/components/eui-range-track/index.hbs
+++ b/packages/core/addon/components/eui-range-track/index.hbs
@@ -1,8 +1,14 @@
 <div
-  class="euiRangeTrack {{if @disabled "euiRangeTrack--disabled"}}"
+  class={{class-names
+    "euiRangeTrack"
+    (if @disabled "euiRangeTrack--disabled")
+    (if @showTicks "euiRangeTrack--hasTicks")
+    (if (and @levels (gt @levels.length 0)) "euiRangeTrack--hasLevels")
+  }}
   style={{if this.derivedState.styles this.derivedState.styles}}
   ...attributes
   {{did-insert (fn this.validateValueIsInStep @max)}}
+  {{did-insert this.registerTrack}}
   {{did-update (fn this.validateValueIsInStep @max) @max}}
   {{did-update (fn this.validateValueIsInStep @max) @min}}
   {{did-update (fn this.validateValueIsInStep @max) @step}}
@@ -14,6 +20,7 @@
       @max={{@max}}
       @min={{@min}}
       @showTicks={{@showTicks}}
+      @trackWidth={{this.trackEl.clientWidth}}
     />
   {{/if}}
   {{#if this.derivedState.tickSequence}}
@@ -27,7 +34,8 @@
       @max={{@max}}
       @interval={{or @tickInterval @step}}
       @onChange={{@onChange}}
+      @trackWidth={{this.trackEl.clientWidth}}
     />
   {{/if}}
   {{yield}}
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/core/addon/components/eui-range-track/index.ts b/packages/core/addon/components/eui-range-track/index.ts
index c9ec92133..2e1be4193 100644
--- a/packages/core/addon/components/eui-range-track/index.ts
+++ b/packages/core/addon/components/eui-range-track/index.ts
@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { EuiRangeLevel, LEVEL_COLORS } from '../eui-range-levels';
 import { assert } from '@ember/debug';
 import { isEvenlyDivisibleBy } from '../../utils/number';
@@ -35,14 +36,28 @@ type Styling = {
 };
 
 export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs> {
+  @tracked
+  trackEl: HTMLElement | undefined;
+
+  @action
+  registerTrack(el: HTMLElement) {
+    this.trackEl = el;
+  }
+
   @action
   validateValueIsInStep(value: number): number {
     const { min, max, step } = this.args;
     if (value < min) {
-      assert(`The value of ${value} is lower than the min value of ${min}.`, false);
+      assert(
+        `The value of ${value} is lower than the min value of ${min}.`,
+        false
+      );
     }
     if (value > max) {
-      assert(`The value of ${value} is higher than the max value of ${max}.`, false);
+      assert(
+        `The value of ${value} is higher than the max value of ${max}.`,
+        false
+      );
     }
     // Error out if the value doesn't line up with the sequence of steps
     if (!isEvenlyDivisibleBy(value - min, step !== undefined ? step : 1)) {
@@ -95,7 +110,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
     // Error out if there are too many ticks to render
     if (ticks.length > 20) {
       assert(
-        `The number of ticks to render is too high (${ticks.length}), reduce the interval.`,
+        `The number of ticks to render is too high (${ticks.length}), increase the interval.`,
         true
       );
     }
@@ -105,7 +120,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
 
   get derivedState(): Styling {
     let tickSequence;
-    let styles;
+    let styles = '';
     const { showTicks, min, max, step, tickInterval, ticks } = this.args;
 
     if (showTicks) {
@@ -114,7 +129,9 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
       // Calculate if any extra margin should be added to the inputWrapper
       // because of longer tick labels on the ends
       const lengthOfMinLabel = String(tickSequence[0]).length;
-      const lenghtOfMaxLabel = String(tickSequence[tickSequence.length - 1]).length;
+      const lenghtOfMaxLabel = String(
+        tickSequence[tickSequence.length - 1]
+      ).length;
       const isLastTickTheMax = tickSequence[tickSequence.length - 1] === max;
       if (lengthOfMinLabel > 2) {
         styles = `margin-left: ${lengthOfMinLabel / 5}em`;
@@ -126,7 +143,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
 
     return {
       tickSequence,
-      styles: htmlSafe(styles as string)
+      styles: htmlSafe(styles)
     };
   }
 }
diff --git a/packages/core/addon/components/eui-range/index.hbs b/packages/core/addon/components/eui-range/index.hbs
index aacbcd350..c4a45edb3 100644
--- a/packages/core/addon/components/eui-range/index.hbs
+++ b/packages/core/addon/components/eui-range/index.hbs
@@ -1,6 +1,6 @@
 {{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
   (and (not (arg-or-default @isFakeMaxBlock false)) (has-block "max"))
   (and (not (arg-or-default @isFakeMinBlock false)) (has-block "min"))
   (and (not (arg-or-default @isFakeValueBlock false)) (has-block "value"))
@@ -38,8 +38,8 @@
           @isLoading={{and @showInputOnly @isLoading}}
           @isInvalid={{@isInvalid}}
           @autoSize={{not this.showInputOnly}}
-          @isFakePrependBlock={{hasPrepend}}
-          @isFakeAppendBlock={{hasAppend}}
+          @isPrependProvided={{hasPrepend}}
+          @isAppendProvided={{hasAppend}}
           ...attributes
           {{on
             "focus"
@@ -61,7 +61,10 @@
       </:input>
       <:content>
         <EuiRangeWrapper
-          class="euiRange"
+          class={{class-names
+            "euiRange"
+            (if this.showInput "euiRange--hasInput")
+          }}
           @fullWidth={{@fullWidth}}
           @compressed={{@compressed}}
         >
@@ -191,6 +194,8 @@
                 @isLoading={{and @showInputOnly @isLoading}}
                 @isInvalid={{@isInvalid}}
                 @autoSize={{not this.showInputOnly}}
+                @isPrependProvided={{hasPrepend}}
+                @isAppendProvided={{hasAppend}}
                 ...attributes
                 {{on
                   "focus"
@@ -203,7 +208,14 @@
                   (if this.canShowDropdown this.onInputBlur (optional @onBlur))
                 }}
                 {{on "input" this.handleOnChange}}
-              />
+              >
+                <:prepend as |classes|>
+                  {{yield classes to="prepend"}}
+                </:prepend>
+                <:append as |classes|>
+                  {{yield classes to="append"}}
+                </:append>
+              </EuiRangeInput>
             {{/if}}
           {{/if}}
         </EuiRangeWrapper>
@@ -211,7 +223,10 @@
     </EuiInputPopover>
   {{else}}
     <EuiRangeWrapper
-      class="euiRange"
+      class={{class-names
+        "euiRange"
+        (if this.showInput "euiRange--hasInput")
+      }}
       @fullWidth={{@fullWidth}}
       @compressed={{@compressed}}
     >
@@ -337,8 +352,8 @@
             @isLoading={{and @showInputOnly @isLoading}}
             @isInvalid={{@isInvalid}}
             @autoSize={{not this.showInputOnly}}
-            @isFakePrependBlock={{hasPrepend}}
-            @isFakeAppendBlock={{hasAppend}}
+            @isPrependProvided={{hasPrepend}}
+            @isAppendProvided={{hasAppend}}
             ...attributes
             {{on
               "focus"
@@ -349,9 +364,16 @@
               (if this.canShowDropdown this.onInputBlur (optional @onBlur))
             }}
             {{on "input" this.handleOnChange}}
-          />
+          >
+            <:prepend as |classes|>
+              {{yield classes to="prepend"}}
+            </:prepend>
+            <:append as |classes|>
+              {{yield classes to="append"}}
+            </:append>
+          </EuiRangeInput>
         {{/if}}
       {{/if}}
     </EuiRangeWrapper>
   {{/if}}
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/core/addon/helpers/get-range-tick.ts b/packages/core/addon/helpers/get-range-tick.ts
index 841917440..d7471b975 100644
--- a/packages/core/addon/helpers/get-range-tick.ts
+++ b/packages/core/addon/helpers/get-range-tick.ts
@@ -1,19 +1,61 @@
 import { helper } from '@ember/component/helper';
+import { EUI_THUMB_SIZE } from '../utils/range';
 
 export interface EuiRangeTick {
   value: number;
   label: string;
 }
 
-export function getRangeTick([ticks, tickValue, min, max, percentageWidth]: [
-  EuiRangeTick[],
-  number,
-  number,
-  number,
-  number
-]) {
+export function calculateOffset(
+  position: number,
+  value: number,
+  bound: number
+) {
+  const threshold = 30;
+  let offset = value === bound ? 0 : EUI_THUMB_SIZE / 2;
+  if (offset !== 0) {
+    // Estimating offset by eye. Trying to account for range scaling at both ends.
+    offset =
+      position <= threshold ? offset + (1 / position) * threshold : offset;
+    offset =
+      position >= 100 - threshold
+        ? offset - (1 / (100 - position)) * threshold
+        : offset;
+  }
+  return offset;
+}
+
+export function calculateThumbPosition(
+  value: number,
+  min: number,
+  max: number,
+  width: number,
+  thumbSize: number = EUI_THUMB_SIZE
+): number {
+  // Calculate the left position based on value
+  const decimal = (value - min) / (max - min);
+  // Must be between 0-100%
+  let valuePosition = decimal <= 1 ? decimal : 1;
+  valuePosition = valuePosition >= 0 ? valuePosition : 0;
+
+  const trackWidth = width ?? 0;
+  const thumbToTrackRatio = thumbSize / trackWidth;
+  const trackPositionScale = (1 - thumbToTrackRatio) * 100;
+
+  return valuePosition * trackPositionScale;
+}
+
+export function getRangeTick([
+  ticks,
+  tickValue,
+  min,
+  max,
+  percentageWidth,
+  trackWidth = 0
+]: [EuiRangeTick[], number, number, number, number, number]) {
   let tickStyle: string = '';
   let customTick;
+
   if (ticks) {
     customTick = ticks.find((o) => o.value === tickValue);
 
@@ -21,7 +63,10 @@ export function getRangeTick([ticks, tickValue, min, max, percentageWidth]: [
       tickStyle = `left: ${((customTick.value - min) / (max - min)) * 100}%;`;
     }
   } else {
-    tickStyle = `width: ${tickStyle} ${percentageWidth}%`;
+    let position = calculateThumbPosition(tickValue, min, max, trackWidth);
+
+    tickStyle = `left: calc(${position}% + ${EUI_THUMB_SIZE / 2}px);`;
+    tickStyle += `width: ${percentageWidth}%;`;
   }
 
   return {
diff --git a/packages/core/addon/utils/css-mappings/eui-range-levels.ts b/packages/core/addon/utils/css-mappings/eui-range-levels.ts
index 42344f36e..a1e277629 100644
--- a/packages/core/addon/utils/css-mappings/eui-range-levels.ts
+++ b/packages/core/addon/utils/css-mappings/eui-range-levels.ts
@@ -1,17 +1,35 @@
+import {
+  calculateThumbPosition,
+  calculateOffset
+} from '../../helpers/get-range-tick';
+
 export const baseClass = 'euiRangeLevels';
 
 export function inlineStyles({
   min,
   max,
-  level
+  level,
+  trackWidth
 }: {
   min: number;
   max: number;
   level: { min: number; max: number };
+  trackWidth: number;
 }): Record<string, unknown> {
-  const range = level.max - level.min;
-  const width = (range / (max - min)) * 100;
-  return { width: `${width}%` };
+  const left =
+    level.min === min
+      ? 0
+      : calculateThumbPosition(level.min, min, max, trackWidth);
+  const right =
+    level.max === max
+      ? 100
+      : calculateThumbPosition(level.max, min, max, trackWidth);
+  const leftOffset = calculateOffset(left, level.min, min);
+  const rightOffset = calculateOffset(right, level.max, max);
+  return {
+    left: `calc(${left}% + ${leftOffset}px)`,
+    right: `calc(${100 - right}% - ${rightOffset}px)`
+  };
 }
 
 const mapping: ComponentMapping = {
diff --git a/packages/core/addon/utils/range/index.ts b/packages/core/addon/utils/range/index.ts
new file mode 100644
index 000000000..bd93214b6
--- /dev/null
+++ b/packages/core/addon/utils/range/index.ts
@@ -0,0 +1 @@
+export const EUI_THUMB_SIZE = 16;
diff --git a/packages/core/docs/forms/form-controls/range-demo/demo7.md b/packages/core/docs/forms/form-controls/range-demo/demo7.md
new file mode 100644
index 000000000..8a24a5972
--- /dev/null
+++ b/packages/core/docs/forms/form-controls/range-demo/demo7.md
@@ -0,0 +1,349 @@
+---
+order: 7
+---
+
+# Range kitchen sink
+
+```hbs template
+<EuiText>
+  <p>
+    Showcase of the different settings ranges can have
+  </p>
+</EuiText>
+<EuiTitle>
+  Simple range
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Simple range with input
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput={{true}}
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Simple range with popover
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput='inputWithPopover'
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Simple range with append and popover
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput='inputWithPopover'
+>
+  <:append as |classes|>
+    <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+  </:append>
+</EuiRange>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Dual range with append and popover
+</EuiTitle>
+<EuiDualRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.valueDual}}
+  @onChange={{set this 'valueDual'}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput='inputWithPopover'
+>
+  <:append as |classes|>
+    <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+  </:append>
+</EuiDualRange>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Dual range with append
+</EuiTitle>
+<EuiCallOut
+  @iconType='alert'
+  @title='Content blocks and `showInput`'
+  @color='warning'
+>
+  <:body>
+    The
+    <b>prepend</b>
+    and
+    <b>append</b>
+    blocks are not shown in dual ranges unless the `showInput` value is
+    `inputWithPopover`
+  </:body>
+</EuiCallOut>
+<EuiDualRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.valueDual}}
+  @onChange={{set this 'valueDual'}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput={{true}}
+>
+  <:append as |classes|>
+    <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+  </:append>
+</EuiDualRange>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Dual range
+</EuiTitle>
+<EuiDualRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.valueDual}}
+  @onChange={{set this 'valueDual'}}
+  @showLabels={{true}}
+  @showValue={{true}}
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Ranges within forms
+</EuiTitle>
+<EuiChangesetForm
+  @changeset={{changeset this.changeset}}
+  as |Form changesetObj|
+>
+  <EuiFlexGroup @direction='column' @gutterSize='none'>
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider with input'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider with append'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider with popover'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @fieldName='rangeSlider2'
+      @label='Dual slider with popover'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldDualRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @fieldName='rangeSlider2'
+      @label='Dual slider with inputs'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+    />
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @fieldName='rangeSlider2'
+      @label='Plain dual slider'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+    />
+    <EuiButton @type='submit' @isDisabled={{changesetObj.isInvalid}}>
+      Submit form
+    </EuiButton>
+  </EuiFlexGroup>
+</EuiChangesetForm>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Validated form
+</EuiTitle>
+<ValidatedForm as |Form|>
+  <EuiFlexGroup @direction='column' @gutterSize='none'>
+    <Form.FieldRangeSlider
+      @label='Range slider'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @label='Range slider with input'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @label='Range slider with append'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @label='Range slider with popover'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @label='Dual slider with popover'
+      @value={{this.validatedData.rangeSlider2}}
+      @onChange={{set this.validatedData 'rangeSlider2'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+      @validations={{hash presence=(hash presence=true)}}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldDualRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @label='Dual slider with inputs'
+      @value={{this.validatedData.rangeSlider2}}
+      @onChange={{set this.validatedData 'rangeSlider2'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+      @validations={{hash presence=(hash presence=true)}}
+    />
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @label='Plain dual slider'
+      @value={{this.validatedData.rangeSlider2}}
+      @onChange={{set this.validatedData 'rangeSlider2'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @validations={{hash presence=(hash presence=true)}}
+    />
+    <EuiButton @type='submit'>
+      Submit form
+    </EuiButton>
+  </EuiFlexGroup>
+</ValidatedForm>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoCardComponent extends Component {
+  @tracked value = 0;
+  @tracked valueDual = [0, 0];
+  @tracked validatedData = {};
+  changeset = {};
+}
+```
diff --git a/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.hbs b/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.hbs
index b51e47a9c..870479eac 100644
--- a/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.hbs
+++ b/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.hbs
@@ -20,7 +20,7 @@
     <EuiDualRange
       class={{@fieldClasses}}
       form={{@formId}}
-      @value={{this.value}}
+      @value={{@value}}
       @fullWidth={{@fullWidth}}
       @isInvalid={{this.isInvalidAndTouched}}
       @levels={{@levels}}
@@ -47,8 +47,8 @@
       @inputRef={{@inputRef}}
       @controlOnly={{@controlOnly}}
       @autoSize={{@autoSize}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       @isFakeMinBlock={{not (has-block "min")}}
       @isFakeMaxBlock={{not (has-block "max")}}
       autofocus={{@autofocus}}
@@ -69,4 +69,4 @@
       </:append>
     </EuiDualRange>
   </EuiFormRow>
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.js b/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.js
index 6a46b19c7..eccb96fa7 100644
--- a/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.js
+++ b/packages/validated-form/addon/components/validated-form/field-dual-range-slider/index.js
@@ -1,3 +1,12 @@
 import ValidatedFormFieldBase from '../field-base';
+import { action } from '@ember/object';
 
-export default class ValidatedFormFieldRangeSlider extends ValidatedFormFieldBase {}
+export default class ValidatedFormFieldRangeSlider extends ValidatedFormFieldBase {
+  @action
+  handleChange(e) {
+    // The received event for the dual range is an array with [min, max] as strings
+    const value = [Number(e[0]), Number(e[1])];
+    this.args.onChange(value);
+    this.notifyValidityChange();
+  }
+}
diff --git a/packages/validated-form/addon/components/validated-form/field-number/index.hbs b/packages/validated-form/addon/components/validated-form/field-number/index.hbs
index f53d67eaf..b1d84a9e8 100644
--- a/packages/validated-form/addon/components/validated-form/field-number/index.hbs
+++ b/packages/validated-form/addon/components/validated-form/field-number/index.hbs
@@ -35,8 +35,8 @@
       @controlOnly={{@controlOnly}}
       @compressed={{@compressed}}
       @id={{theId}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       autofocus={{@autofocus}}
       placeholder={{@placeholder}}
       ...attributes
@@ -51,4 +51,4 @@
       </:append>
     </EuiFieldNumber>
   </EuiFormRow>
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/validated-form/addon/components/validated-form/field-range-slider/index.hbs b/packages/validated-form/addon/components/validated-form/field-range-slider/index.hbs
index af03c166b..dc7ee11fe 100644
--- a/packages/validated-form/addon/components/validated-form/field-range-slider/index.hbs
+++ b/packages/validated-form/addon/components/validated-form/field-range-slider/index.hbs
@@ -47,8 +47,8 @@
       @inputRef={{@inputRef}}
       @controlOnly={{@controlOnly}}
       @autoSize={{@autoSize}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       @isFakeMinBlock={{not (has-block "min")}}
       @isFakeMaxBlock={{not (has-block "max")}}
       @isFakeValueBlock={{not (has-block "value")}}
@@ -82,4 +82,4 @@
       </:append>
     </EuiRange>
   </EuiFormRow>
-{{/let}}
\ No newline at end of file
+{{/let}}
diff --git a/packages/validated-form/addon/components/validated-form/index.hbs b/packages/validated-form/addon/components/validated-form/index.hbs
index cc115aef3..6bf0c0c06 100644
--- a/packages/validated-form/addon/components/validated-form/index.hbs
+++ b/packages/validated-form/addon/components/validated-form/index.hbs
@@ -112,7 +112,7 @@
           formId=formId
           disabled=@isDisabled
         )
-        FieldRangeDualSlider=(component
+        FieldDualRangeSlider=(component
           "validated-form/field-dual-range-slider"
           register=this.register
           unregister=this.unregister
@@ -145,4 +145,4 @@
       )
     }}
   </EuiForm>
-{{/let}}
\ No newline at end of file
+{{/let}}