diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss
index 81f1c0334b8..8646cd7996e 100644
--- a/core/src/components/range/range.ionic.scss
+++ b/core/src/components/range/range.ionic.scss
@@ -75,30 +75,33 @@
   @include margin(null, null, calc(globals.$ion-space-200 + globals.$ion-font-size-300), null);
 }
 
+.range-bar.has-ticks {
+  @include border-radius(0);
+}
+
+.range-bar.range-bar-active.has-ticks {
+  @include margin(null, calc(-1 * globals.$ion-scale-100 * 0.5), null, calc(-1 * globals.$ion-scale-100 * 0.5));
+}
+
 .range-bar.range-bar-active {
   bottom: 0;
 
   width: auto;
 
   background: var(--bar-background-active);
-
-  &.has-ticks {
-    @include border-radius(0);
-    @include margin(null, calc(-1 * globals.$ion-scale-100 * 0.5), null, calc(-1 * globals.$ion-scale-100 * 0.5));
-  }
 }
 
 .range-tick {
   @include margin-horizontal(calc(globals.$ion-scale-100 * -0.5), null);
-  @include border-radius(globals.$ion-border-radius-0);
+  @include border-radius(globals.$ion-border-radius-400);
 
   position: absolute;
-  top: calc((var(--height) * 0.5) - (globals.$ion-scale-300 * 0.5));
+  top: calc((var(--height) * 0.5) - (globals.$ion-scale-400 * 0.5));
 
-  width: globals.$ion-scale-100;
-  height: globals.$ion-scale-300;
+  width: globals.$ion-scale-050;
+  height: globals.$ion-scale-400;
 
-  background: globals.$ion-primitives-neutral-100;
+  background: var(--bar-background);
   pointer-events: none;
 }
 
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 15169148b18..ea35dfe4903 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -914,7 +914,14 @@ export class Range implements ComponentInterface {
         ))}
 
         <div class="range-bar-container">
-          <div class="range-bar" role="presentation" part="bar" />
+          <div
+            class={{
+              'range-bar': true,
+              'has-ticks': ticks.length > 0,
+            }}
+            role="presentation"
+            part="bar"
+          />
           <div
             class={{
               'range-bar': true,
diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 893a5d09a54..5d804a02067 100644
Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 51e024b7917..01190eec362 100644
Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3337b5f3f8e..c8969eac342 100644
Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png differ