Ionic 6 disabled ion-range always has white square outline round knob

Hi, all senior Ionic developers.

I have an Ionic 6 + Angular 13 project using ion-range and I found the white square outline around a disabled ion-range knob cannot be removed or overwrited! It only happens in Android. I created a simple new blank project which has nothing but only ion-range. It’s still there. So it seems a bug of ion-range in Android.
I have tried to find the html element path and use !important to overwrite it but useless.
Can anyone teach me how to remove the annoying outline?

My Ionic info


   Ionic CLI                     : 6.19.1 (/Users/calvinchu/.nvm/versions/node/v14.19.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.7.4
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0


   Cordova CLI       : 11.0.0
   Cordova Platforms : android 10.1.2
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 26 other plugins)


   cordova-res : 0.15.4
   native-run  : 1.7.2


   Android SDK Tools : 26.1.1 (/Users/calvinchu/Library/Android/sdk)
   ios-deploy        : 1.12.0
   ios-sim           : ios-sim/9.0.0 darwin-x64 node-v14.19.3
   NodeJS            : v14.19.3 (/Users/calvinchu/.nvm/versions/node/v14.19.3/bin/node)
   npm               : 6.14.17
   OS                : macOS
   Xcode             : Xcode 14.3.1 Build version 14E300c

I googled and saw the the same issue in Ionic 4 but it’s still there in Ionic 6??!!

Found a solution here: Range Slider | ion-range: Slider Knob Controls with Labels

ion-range::part(knob) {
  outline: none;

Then the white outline disappeared!