diff --git a/core/api.txt b/core/api.txt
index 45a9452312..6d82eeaf33 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -861,6 +861,12 @@ ion-range,css-prop,--knob-box-shadow
 ion-range,css-prop,--knob-size
 ion-range,css-prop,--pin-background
 ion-range,css-prop,--pin-color
+ion-range,part,bar
+ion-range,part,bar-active
+ion-range,part,knob
+ion-range,part,pin
+ion-range,part,tick
+ion-range,part,tick-active
 
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 418fc0656b..75b9715d30 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -10,6 +10,13 @@ import { createColorClasses, hostContext } from '../../utils/theme';
  *
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
+ *
+ * @part tick - An inactive tick mark.
+ * @part tick-active - An active tick mark.
+ * @part pin - The counter that appears above a knob.
+ * @part knob - The handle that is used to drag the range.
+ * @part bar - The inactive part of the bar.
+ * @part bar-active - The active part of the bar.
  */
 @Component({
   tag: 'ion-range',
@@ -435,14 +442,16 @@ export class Range implements ComponentInterface {
                 'range-tick': true,
                 'range-tick-active': tick.active
               }}
+              part={tick.active ? 'tick-active' : 'tick'}
             />
           ))}
 
-          <div class="range-bar" role="presentation" />
+          <div class="range-bar" role="presentation" part="bar" />
           <div
             class="range-bar range-bar-active"
             role="presentation"
             style={barStyle}
+            part="bar-active"
           />
 
           { renderKnob(isRTL, {
@@ -530,8 +539,8 @@ const renderKnob = (isRTL: boolean, { knob, value, ratio, min, max, disabled, pr
       aria-disabled={disabled ? 'true' : null}
       aria-valuenow={value}
     >
-      {pin && <div class="range-pin" role="presentation">{Math.round(value)}</div>}
-      <div class="range-knob" role="presentation" />
+      {pin && <div class="range-pin" role="presentation" part="pin">{Math.round(value)}</div>}
+      <div class="range-knob" role="presentation" part="knob" />
     </div>
   );
 };
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index 154f79d8e3..7c6c221e0c 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -250,6 +250,18 @@ export default {
 | `"start"` | Content is placed to the left of the range slider in LTR, and to the right in RTL. |
 
 
+## Shadow Parts
+
+| Part            | Description                                |
+| --------------- | ------------------------------------------ |
+| `"bar"`         | The inactive part of the bar.              |
+| `"bar-active"`  | The active part of the bar.                |
+| `"knob"`        | The handle that is used to drag the range. |
+| `"pin"`         | The counter that appears above a knob.     |
+| `"tick"`        | An inactive tick mark.                     |
+| `"tick-active"` | An active tick mark.                       |
+
+
 ## CSS Custom Properties
 
 | Name                      | Description                        |
diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html
index 656777b1ea..5c15d0f815 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/core/src/components/range/test/basic/index.html
@@ -10,7 +10,45 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <style>
+    .range-part::part(bar) {
+      background: red;
+    }
 
+    .range-part::part(tick) {
+      background: purple;
+    }
+
+    .range-part::part(bar-active) {
+      background: green;
+    }
+
+    .range-part::part(tick-active) {
+      background: orange;
+    }
+
+    .range-part::part(knob) {
+      background: hotpink;
+    }
+
+    .ios.range-part::part(pin) {
+      background: orange;
+
+      top: -13px;
+
+      height: 20px;
+
+      line-height: 4px;
+      border-radius: 4px;
+
+      transform: translate(0, 0, 0);
+    }
+
+    .md.range-part::part(pin),
+    .md.range-part::part(pin)::before {
+      background: orange;
+    }
+  </style>
 <body>
   <ion-app>
 
@@ -97,6 +135,9 @@
             Options
           </ion-label>
         </ion-list-header>
+        <ion-item>
+          <ion-range class="range-part" min="-200" max="200" step="10" snaps="true" pin="true" dual-knobs="true"></ion-range>
+        </ion-item>
         <ion-item>
           <ion-range pin="true"></ion-range>
         </ion-item>
@@ -216,6 +257,12 @@
     maxRange.addEventListener('ionChange', function(ev) {
       targetRange.max = ev.detail.value;
     })
+
+    const rangePart = document.querySelector('.range-part');
+    rangePart.value = {
+      lower: '-100',
+      upper: '100'
+    }
   </script>
 </body>