feat(range): update pressed design for .range-value-min.range-value-max

Author: rdlabo

demo/package-lock.json

@@ -34,7 +34,7 @@
     "@capacitor/ios": "^7.4.3",
     "@capacitor/keyboard": "7.0.3",
     "@capacitor/status-bar": "7.0.3",
-    "@ionic/angular": "^8.7.16",
+    "@ionic/angular": "^8.7.17-dev.11768943212.1b316931",
     "@rdlabo/ionic-theme-ios26": "file:..",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",

demo/package.json

@@ -1,7 +1,13 @@
 @use '../utils/api';
 
+@mixin scaled-transform($translate-x) {
+  transform: scale(1.56, 1.47) translateX(calc(#{$translate-x} * -0.1)) translateZ(0) !important;
+  -webkit-transform: scale(1.56, 1.47) translateX(calc(#{$translate-x} * -0.1)) translateZ(0) !important;
+}
+
 ion-range.ios:not(.ios26-disabled) {
   --knob-size: 20px;
+  --knob-width: 38px;
   --knob-border-radius: 24px;
   &.range-label-placement-start::part(label) {
     margin-inline: 0 24px;
@@ -17,18 +23,39 @@ ion-range.ios:not(.ios26-disabled) {
   }
 
   &::part(knob) {
-    width: 38px;
+    width: var(--knob-width);
     margin-inline-start: -8px;
-    transition: transform 300ms ease;
+    transition:
+      transform 300ms ease,
+      margin 300ms ease,
+      box-shadow 200ms ease;
   }
   &.range-pressed::part(knob) {
-    transform: scale(1.4, 1.6) translateX(calc(38px * -0.1)) translateZ(0);
-    -webkit-transform: scale(1.4, 1.6) translateX(calc(38px * -0.1)) translateZ(0);
-    @include api.glass-background(0.1, 0.5px, 120%);
+    @include scaled-transform(0px);
+    @include api.glass-background(0.1, 0, 120%);
+    border: none;
     box-shadow:
-      inset 0 8px 8px -8px var(--bar-background),
-      inset 0 -8px 8px -8px var(--bar-background),
-      inset 8px 0 8px -8px var(--bar-background),
-      inset -8px 0 8px -8px var(--bar-background);
+      0 0.5px 4px rgba(0, 0, 0, 0.12),
+      0 6px 4px rgba(0, 0, 0, 0.05),
+      inset 0.4px 0.4px 1px 0 var(--bar-background-active);
+  }
+
+  &:not([dual-knobs='true']).range-pressed.range-value-min {
+    &::part(knob) {
+      @include scaled-transform(calc(var(--knob-width) * -2));
+      box-shadow:
+        0 0.5px 4px rgba(0, 0, 0, 0.12),
+        0 6px 4px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &:not([dual-knobs='true']).range-pressed.range-value-max {
+    &::part(knob) {
+      @include scaled-transform(calc(var(--knob-width) * 2));
+      box-shadow:
+        0 0.5px 4px rgba(0, 0, 0, 0.12),
+        0 6px 4px rgba(0, 0, 0, 0.05),
+        inset 0.4px 0.4px 1px 0.2px var(--bar-background-active);
+    }
   }
 }