diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 13c36a09e2e..5c03a3c47ee 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4193,6 +4193,10 @@ export namespace Components {
           * When `true`, indicates a histogram is present.
          */
         "hasHistogram": boolean;
+        /**
+          * Used to configure where the fill is placed along the slider track in relation to the value handle.  Range mode will always display the fill between the min and max handles.
+         */
+        "highlightPlacement": "start" | "none" | "end";
         /**
           * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
           * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5)
@@ -11757,6 +11761,10 @@ declare namespace LocalJSX {
           * When `true`, indicates a histogram is present.
          */
         "hasHistogram"?: boolean;
+        /**
+          * Used to configure where the fill is placed along the slider track in relation to the value handle.  Range mode will always display the fill between the min and max handles.
+         */
+        "highlightPlacement"?: "start" | "none" | "end";
         /**
           * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
           * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5)
diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts
index 80633bb5071..cbf742623ef 100644
--- a/packages/calcite-components/src/components/slider/slider.stories.ts
+++ b/packages/calcite-components/src/components/slider/slider.stories.ts
@@ -445,3 +445,20 @@ export const spaceGroupSeparatorNoBreak_TestOnly = (): string => html`
     ticks="2000"
   ></calcite-slider>
 `;
+
+export const fillPlacements = (): string => html`
+  <label>start (default)</label>
+  <calcite-slider min="0" max="100" value="0" fill-placement="start"></calcite-slider>
+  <calcite-slider min="0" max="100" value="50" fill-placement="start"></calcite-slider>
+  <calcite-slider min="0" max="100" value="100" fill-placement="start"></calcite-slider>
+  <br />
+  <label>none</label>
+  <calcite-slider min="0" max="100" value="0" fill-placement="none"></calcite-slider>
+  <calcite-slider min="0" max="100" value="50" fill-placement="none"></calcite-slider>
+  <calcite-slider min="0" max="100" value="100" fill-placement="none"></calcite-slider>
+  <br />
+  <label>end</label>
+  <calcite-slider min="0" max="100" value="0" fill-placement="end"></calcite-slider>
+  <calcite-slider min="0" max="100" value="50" fill-placement="end"></calcite-slider>
+  <calcite-slider min="0" max="100" value="100" fill-placement="end"></calcite-slider>
+`;
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index cf395211325..17fc2d8a331 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -82,8 +82,7 @@ export class Slider
    *
    * When not set, the component will be associated with its ancestor form element, if any.
    */
-  @Prop({ reflect: true })
-  form: string;
+  @Prop({ reflect: true }) form: string;
 
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
@@ -93,6 +92,13 @@ export class Slider
   /** When `true`, indicates a histogram is present. */
   @Prop({ reflect: true, mutable: true }) hasHistogram = false;
 
+  /**
+   * Used to configure where the fill is placed along the slider track in relation to the value handle.
+   *
+   * Range mode will always display the fill between the min and max handles.
+   */
+  @Prop({ reflect: true }) highlightPlacement: "start" | "none" | "end" = "start";
+
   /**
    * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
    *
@@ -281,6 +287,24 @@ export class Slider
         mirror,
       });
 
+    const { highlightPlacement } = this;
+    const trackRangePlacementStyles =
+      highlightPlacement === "none"
+        ? {
+            left: `unset`,
+            right: `unset`,
+          }
+        : highlightPlacement === "end"
+          ? {
+              left: `${mirror ? minInterval : maxInterval}%`,
+              right: `${mirror ? maxInterval : minInterval}%`,
+            }
+          : /* default */
+            {
+              left: `${mirror ? 100 - maxInterval : minInterval}%`,
+              right: `${mirror ? minInterval : 100 - maxInterval}%`,
+            };
+
     return (
       <Host id={id} onKeyDown={this.handleKeyDown} onTouchStart={this.handleTouchStart}>
         <InteractiveContainer disabled={this.disabled}>
@@ -301,10 +325,7 @@ export class Slider
               <div
                 class={CSS.trackRange}
                 onPointerDown={this.onTrackPointerDown}
-                style={{
-                  left: `${mirror ? 100 - maxInterval : minInterval}%`,
-                  right: `${mirror ? minInterval : 100 - maxInterval}%`,
-                }}
+                style={trackRangePlacementStyles}
               />
               <div class={CSS.ticks}>
                 {this.tickValues.map((tick) => {