diff --git a/demo/package-lock.json b/demo/package-lock.json
index 1668192..97f7749 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -22,7 +22,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",
@@ -57,7 +57,7 @@
     },
     "..": {
       "name": "@rdlabo/ionic-theme-ios26",
-      "version": "2.1.3",
+      "version": "2.2.0",
       "license": "MIT",
       "devDependencies": {
         "@ionic/angular": "^8.7.6",
@@ -2297,12 +2297,12 @@
       }
     },
     "node_modules/@ionic/angular": {
-      "version": "8.7.16",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.7.16.tgz",
-      "integrity": "sha512-rdOQu07VvfqgnIbas/K+ebitjQI5u4OgiH7fcy/LAKdSxERzWqkDVBXpHtZIVDMOQcPlVN0cWEnaQUbnfDpTVA==",
+      "version": "8.7.17-dev.11768943212.1b316931",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.7.17-dev.11768943212.1b316931.tgz",
+      "integrity": "sha512-JkaDfnFcGwwoa/0ek1n8VvZ1PVSrCU6P60DIdq5OqNgaGlBGNCXrwp7wZaOPCrHQDsIAWy+d6DTiE2wjg3bqmQ==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.7.16",
+        "@ionic/core": "8.7.17-dev.11768943212.1b316931",
         "ionicons": "^8.0.13",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -2560,9 +2560,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.16",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.16.tgz",
-      "integrity": "sha512-+vdv/o2Z/2YfoZJIDBLnoh11eJmOOZqQdfwC0zl2MemAVRSofjGuIQlUTZqiUUNht56Rnk9oo53TvmgjNCtmDA==",
+      "version": "8.7.17-dev.11768943212.1b316931",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17-dev.11768943212.1b316931.tgz",
+      "integrity": "sha512-WV9VIFCLTxrFfH7FfH75aYX88hS0tr3VSKA6lB5ivI+yfNEoZHmyL3oUAWuM2EOmvbreqpdGEiPMp1fztjUdqQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.38.0",
@@ -4168,6 +4168,51 @@
         "eslint": ">=9.0.0"
       }
     },
+    "node_modules/@rdlabo/eslint-plugin-rules/node_modules/@ionic/angular": {
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.7.17.tgz",
+      "integrity": "sha512-EKXX5leNzgxVq9QgF67DJmQsJwiX/WKNx/EAqFTWd0eYlgXp3Cxcdkh+AJkoqnCPLoKeWqrmrze7QlxPy/ZfSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ionic/core": "8.7.17",
+        "ionicons": "^8.0.13",
+        "jsonc-parser": "^3.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=16.0.0",
+        "@angular/forms": ">=16.0.0",
+        "@angular/router": ">=16.0.0",
+        "rxjs": ">=7.5.0",
+        "zone.js": ">=0.13.0"
+      }
+    },
+    "node_modules/@rdlabo/eslint-plugin-rules/node_modules/@ionic/core": {
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@stencil/core": "4.38.0",
+        "ionicons": "^8.0.13",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/@rdlabo/eslint-plugin-rules/node_modules/ionicons": {
+      "version": "8.0.13",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz",
+      "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@stencil/core": "^4.35.3"
+      }
+    },
     "node_modules/@rdlabo/ionic-theme-ios26": {
       "resolved": "..",
       "link": true
diff --git a/demo/package.json b/demo/package.json
index b292ee4..87a5280 100644
--- a/demo/package.json
+++ b/demo/package.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",
diff --git a/src/styles/components/ion-range.scss b/src/styles/components/ion-range.scss
index 6666e9b..0c865a2 100644
--- a/src/styles/components/ion-range.scss
+++ b/src/styles/components/ion-range.scss
@@ -1,34 +1,64 @@
 @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;
   }
+
   &.range-label-placement-end::part(label) {
     margin-inline: 24px 0;
   }
+
   [slot='start'] {
     margin-inline: 0 24px;
   }
+
   [slot='end'] {
     margin-inline: 24px 0;
   }
 
   &::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]).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);
+    }
+
+    &.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);
+    }
   }
 }