fix(range): allow overflow on range bar container (#26751)

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 {

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

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, {