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.
My Ionic info
Ionic:
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:
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)
Utility:
cordova-res : 0.15.4
native-run : 1.7.2
System:
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??!!
opened 10:09AM - 22 Apr 19 UTC
closed 12:36PM - 22 Apr 19 UTC
package: core
type: bug
# Bug Report
**Ionic version:**
4.12.0
**Current behavior:**
I have an a… pp with a dark background. If I insert a disabled ion-range and view it on an **android** device I get the attached picture. There is an ugly white frame around the knob. There is no extra-CSS for this ion-range.
The border results from an CSS-outline at
:host(.range-disabled) .range-knob {
-webkit-transform: scale(.55);
transform: scale(.55);
outline: 5px solid #fff;
}
If the ion-range is enabled, the outline disappears.
**Expected behavior:**
Remove this outline or make it assessible by variables.
**Steps to reproduce:**
Dark background plus disabled ion-range.
**Related code:**
`<ion-range min="0" max="25" step="5" [(ngModel)]="profile.run[ind]"
[disabled]="editMode?null:''" class="ion-no-padding">
<ion-label slot="start"> -</ion-label>
<ion-label slot="end">+</ion-label>
</ion-range>`
**Ionic info:**
```
Ionic:
ionic (Ionic CLI) : 4.12.0 (...\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.1.2
@angular-devkit/build-angular : 0.13.7
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.7
@ionic/angular-toolkit : 1.4.1
Cordova:
cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 13 other plugins)
System:
Android SDK Tools : 26.1.1 (...\AppData\Local\Android\Sdk)
NodeJS : v8.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.8.0
OS : Windows 10
```
opened 06:41PM - 20 Feb 19 UTC
closed 02:54PM - 26 Feb 20 UTC
package: core
type: bug
# Bug Report
**Ionic version:**
[x] **4.x**
**Current behavior:**
When a… n ion-range is disabled, its knob seems to be rendered with no style applied. This is not so much noticeable with ionic's default light theme, but it is when the background color contrast with it. This image illustrates this issue:
**Expected behavior:**
When an ion-range is disabled, its knob is styled without its default CSS border.
**Steps to reproduce:**
1. Prepend the following two CSS variables to ':root' in variables.css. This will add background contrast to make the issue noticeable:
```css
:root {
/* These examples use the same color: lightsteelblue. */
--ion-background-color: #b0c4de;
--ion-background-color-rgb: 176, 196, 222;
...
```
2. Add the following to any component's template:
```html
<ion-header>
<ion-toolbar>
<ion-title>
Tab Two
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h3>Demo to illustrate ion-range issue</h3>
<p>
When 'display' toggle is in its unchecked position, the 'brightness level' range component is incorrectly styled. As
a workaround
the 'night filter' component never gets disabled (by its HTML attributed), but receives a CSS class that will simulate it as disabled.
</p>
<ion-list>
<ion-item>
<ion-toggle #displayToggleUI></ion-toggle>
<ion-label>display</ion-label>
</ion-item>
<ion-item>
<ion-range [disabled]="displayToggleUI.checked == false" min="10" max="100">
<ion-label slot="start">brightness level</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range [class.disableRange]="!displayToggleUI.checked" min="10" max="100">
<ion-label slot="start">night filter</ion-label>
</ion-range>
</ion-item>
</ion-list>
</ion-content>
```
3. As a workaround, and as the 'night filter' range demostrates above, add the following CSS class to be applied to the component's template:
```css
.disableRange {
pointer-events: none;
filter: grayscale(100%);
opacity: .25;
}
```
**Other information:**
Previous related issue: [#15933]('https://github.com/ionic-team/ionic/issues/15933')
**Ionic info:**
```shell
Ionic:
ionic (Ionic CLI) : 4.10.3
Ionic Framework : @ionic/angular 4.0.2
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.4.0
System:
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
yarn : 1.13.0
OS : Windows 10
```
Found a solution here: Range Slider | ion-range: Slider Knob Controls with Labels
ion-range::part(knob) {
outline: none;
}
Then the white outline disappeared!
