diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index f6d11ba151..13931267c3 100644
--- a/core/src/components/range/range.ios.scss
+++ b/core/src/components/range/range.ios.scss
@@ -40,14 +40,16 @@
 }
 
 .range-bar-active {
-  @include border-radius(0);
-  @include margin(null, calc(-1 * $range-ios-tick-width * 0.5), null, calc(-1 * $range-ios-tick-width * 0.5));
-
   bottom: 0;
 
   width: auto;
 
   background: var(--bar-background-active);
+
+  &.has-ticks {
+    @include border-radius(0);
+    @include margin(null, calc(-1 * $range-ios-tick-width * 0.5), null, calc(-1 * $range-ios-tick-width * 0.5));
+  }
 }
 
 .range-tick {
diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss
index 58c0ae215d..da7a0e22b5 100644
--- a/core/src/components/range/range.scss
+++ b/core/src/components/range/range.scss
@@ -107,8 +107,6 @@
 
   width: 100%;
   height: var(--bar-height);
-
-  overflow: hidden;
 }
 
 .range-bar {
@@ -201,7 +199,6 @@
 }
 
 ::slotted([slot="label"]) {
-
   /**
    * Label text should not extend
    * beyond the bounds of the range.
@@ -226,7 +223,6 @@
   overflow: hidden;
 }
 
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 1e24a85c6b..bb58625fac 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -763,7 +763,16 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
 
         <div class="range-bar-container">
           <div class="range-bar" role="presentation" part="bar" />
-          <div class="range-bar range-bar-active" role="presentation" style={barStyle} part="bar-active" />
+          <div
+            class={{
+              'range-bar': true,
+              'range-bar-active': true,
+              'has-ticks': ticks.length > 0,
+            }}
+            role="presentation"
+            style={barStyle}
+            part="bar-active"
+          />
         </div>
 
         {renderKnob(rtl, {
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png
index 9a934d9d16..1e216f3a4f 100644
Binary files a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png differ