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

Resolves #25872

BREAKING.md

@@ -12,43 +12,16 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 ## Version 7.x
 
+- [Browser and Platform Support](#version-7x-browser-platform-support)
 - [Components](#version-7x-components)
   - [Overlays](#version-7x-overlays)
-  - [Virtual Scroll](#version-7x-virtual-scroll)
+  - [Range](#version-7x-range)
   - [Slides](#version-7x-slides)
-- [Browser and Platform Support](#version-7x-browser-platform-support)
+  - [Virtual Scroll](#version-7x-virtual-scroll)
 - [Utilities](#version-7x-utilities)
   - [hidden attribute](#version-7x-hidden-attribute)
 
-<h2 id="version-7x-components">Components</h2>
-
-<h4 id="version-7x-overlays">Overlays</h4>
-
-Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. 
-
-<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
-
-`ion-virtual-scroll` has been removed from Ionic.
-
-Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
-
-- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
-- [React](https://ionicframework.com/docs/react/virtual-scroll)
-- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
-
-Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
-
-<h4 id="version-7x-slides">Slides</h4>
-
-`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
-
-Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
-
-- [Angular](https://ionicframework.com/docs/angular/slides)
-- [React](https://ionicframework.com/docs/react/slides)
-- [Vue](https://ionicframework.com/docs/vue/slides)
-
-<h4 id="version-7x-browser-platform-support">Browser and Platform Support</h4>
+<h2 id="version-7x-browser-platform-support">Browser and Platform Support</h2>
 
 This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.
 
@@ -75,6 +48,53 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 | iOS      | 14+                    |
 | Android  | 5.1+ with Chromium 79+ |
 
+<h2 id="version-7x-components">Components</h2>
+
+<h4 id="version-7x-overlays">Overlays</h4>
+
+Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. 
+
+<h4 id="version-7x-range">Range</h4>
+
+Range is updated to align with the design specification for supported modes.
+
+**Design tokens**
+
+
+iOS:
+
+|Token|Previous Value|New Value|
+|-----|--------------|---------|
+|`--bar-border-radius`|`0px`|`$range-ios-bar-border-radius` (`2px` default)|
+|`--knob-size`|`28px`|`$range-ios-knob-width` (`26px` default)|
+|`$range-ios-bar-height`|`2px`|`4px`|
+|`$range-ios-bar-background-color`|`rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)`|`var(--ion-color-step-900, #e6e6e6)`|
+|`$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)`|`0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)`|
+|`$range-ios-knob-width`|`28px`|`26px`|
+
+
+<h4 id="version-7x-slides">Slides</h4>
+
+`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
+
+Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
+
+- [Angular](https://ionicframework.com/docs/angular/slides)
+- [React](https://ionicframework.com/docs/react/slides)
+- [Vue](https://ionicframework.com/docs/vue/slides)
+
+<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
+
+`ion-virtual-scroll` has been removed from Ionic.
+
+Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
+
+- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
+- [React](https://ionicframework.com/docs/react/virtual-scroll)
+- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
+
+Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
+
 <h2 id="version-7x-utilities">Utilities</h2>
 
 <h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>

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