fix(range): range matches iOS design specification (#25873)

Resolves #25872

core/src/components/range/range.ios.scss

@@ -8,11 +8,11 @@
   --knob-border-radius: 50%;
   --knob-background: #{$range-ios-knob-background-color};
   --knob-box-shadow: #{$range-ios-knob-box-shadow};
-  --knob-size: 28px;
+  --knob-size: #{$range-ios-knob-width};
   --bar-height: #{$range-ios-bar-height};
   --bar-background: #{$range-ios-bar-background-color};
   --bar-background-active: #{ion-color(primary, base)};
-  --bar-border-radius: 0;
+  --bar-border-radius: #{$range-ios-bar-border-radius};
   --height: #{$range-ios-slider-height};
 
   @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
@@ -36,6 +36,9 @@
 }
 
 .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;
@@ -48,7 +51,7 @@
   @include border-radius($range-ios-tick-border-radius);
 
   position: absolute;
-  top: ($range-ios-hit-height * 0.5) - ($range-ios-tick-height * 0.5) + ($range-ios-bar-height * 0.5);
+  top: ($range-ios-hit-height * 0.5) - ($range-ios-tick-height * 0.5);
 
   width: $range-ios-tick-width;
   height: $range-ios-tick-height;

core/src/components/range/range.ios.vars.scss

@@ -4,76 +4,79 @@
 // --------------------------------------------------
 
 /// @prop - Padding top/bottom of the range
-$range-ios-padding-vertical:                  8px !default;
+$range-ios-padding-vertical: 8px !default;
 
 /// @prop - Padding start/end of the range
-$range-ios-padding-horizontal:                16px !default;
+$range-ios-padding-horizontal: 16px !default;
 
 /// @prop - Height of the range slider
-$range-ios-slider-height:                     42px !default;
+$range-ios-slider-height: 42px !default;
 
 /// @prop - Width of the area that will select the range knob
-$range-ios-hit-width:                         42px !default;
+$range-ios-hit-width: 42px !default;
 
 /// @prop - Height of the area that will select the range knob
-$range-ios-hit-height:                        $range-ios-slider-height !default;
+$range-ios-hit-height: $range-ios-slider-height !default;
 
 /// @prop - Height of the range bar
-$range-ios-bar-height:                        2px !default;
+$range-ios-bar-height: 4px !default;
 
 /// @prop - Background of the range bar
-$range-ios-bar-background-color:              rgba(var(--ion-text-color-rgb, 0, 0, 0), .1) !default;
+$range-ios-bar-background-color: var(--ion-color-step-900, #e6e6e6) !default;
 
 /// @prop - Background of the active range bar
-$range-ios-bar-active-background-color:       current-color(base) !default;
+$range-ios-bar-active-background-color: current-color(base) !default;
+
+/// @prop - Border radius of the range bar
+$range-ios-bar-border-radius: 2px !default;
 
 /// @prop - Width of the range knob
-$range-ios-knob-width:                        28px !default;
+$range-ios-knob-width: 26px !default;
 
 /// @prop - Height of the range knob
-$range-ios-knob-height:                       $range-ios-knob-width !default;
+$range-ios-knob-height: $range-ios-knob-width !default;
 
 /// @prop - Box shadow of the range knob
-$range-ios-knob-box-shadow:                   0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default;
+$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12) !default;
 
 /// @prop - Border radius of the range knob
-$range-ios-knob-border-radius:                50% !default;
+$range-ios-knob-border-radius: 50% !default;
 
 /// @prop - Background of the range knob
-$range-ios-knob-background-color:             #ffffff !default;
+$range-ios-knob-background-color: #ffffff !default;
 
 /// @prop - Width of the range tick
-$range-ios-tick-width:                        $range-ios-bar-height !default;
+$range-ios-tick-width: $range-ios-bar-height !default;
 
 /// @prop - Height of the range tick
-$range-ios-tick-height:                       8px !default;
+$range-ios-tick-height: 8px !default;
 
 /// @prop - Border radius of the range tick
-$range-ios-tick-border-radius:                0 !default;
+$range-ios-tick-border-radius: 0 !default;
 
 /// @prop - Background of the range tick
-$range-ios-tick-background-color:             $range-ios-bar-background-color !default;
+$range-ios-tick-background-color: $range-ios-bar-background-color !default;
 
 /// @prop - Background of the active range tick
-$range-ios-tick-active-background-color:      $range-ios-bar-active-background-color !default;
+$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default;
 
 /// @prop - Background of the range pin
-$range-ios-pin-background-color:              transparent !default;
+$range-ios-pin-background-color: transparent !default;
 
 /// @prop - Color of the range pin
-$range-ios-pin-color:                         $text-color !default;
+$range-ios-pin-color: $text-color !default;
 
 /// @prop - Font size of the range pin
-$range-ios-pin-font-size:                     12px !default;
+$range-ios-pin-font-size: 12px !default;
 
 /// @prop - Padding top of the range pin
-$range-ios-pin-padding-top:                   8px !default;
+$range-ios-pin-padding-top: 8px !default;
 
 /// @prop - Padding end of the range pin
-$range-ios-pin-padding-end:                   $range-ios-pin-padding-top !default;
+$range-ios-pin-padding-end: $range-ios-pin-padding-top !default;
 
 /// @prop - Padding bottom of the range pin
-$range-ios-pin-padding-bottom:                $range-ios-pin-padding-top !default;
+$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default;
 
 /// @prop - Padding start of the range pin
-$range-ios-pin-padding-start:                 $range-ios-pin-padding-end !default;
+$range-ios-pin-padding-start: $range-ios-pin-padding-end !default;

core/src/components/range/range.scss

@@ -93,7 +93,7 @@
   }
 }
 
-.range-bar {
+.range-bar-container {
   @include border-radius(var(--bar-border-radius));
   @include position(calc((var(--height) - var(--bar-height)) / 2), null, null, 0);
 
@@ -107,6 +107,17 @@
   width: 100%;
   height: var(--bar-height);
 
+  overflow: hidden;
+}
+
+.range-bar {
+  @include border-radius(var(--bar-border-radius));
+
+  position: absolute;
+
+  width: 100%;
+  height: var(--bar-height);
+
   background: var(--bar-background);
 
   pointer-events: none;

core/src/components/range/range.tsx

@@ -613,8 +613,10 @@ export class Range implements ComponentInterface {
             />
           ))}
 
-          <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-container">
+            <div class="range-bar" role="presentation" part="bar" />
+            <div class="range-bar range-bar-active" role="presentation" style={barStyle} part="bar-active" />
+          </div>
 
           {renderKnob(rtl, {
             knob: 'A',