[Material Slider] Overriding theme's colors

[guillemc23]

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• Android

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.3.2
• Cross-platform modules:8.3.4
• Runtime(s): Android 8.3.1
• Plugin(s):

  "dependencies": {
    "@angular/animations": "~14.2.0",
    "@angular/common": "~14.2.0",
    "@angular/compiler": "~14.2.0",
    "@angular/core": "~14.2.0",
    "@angular/forms": "~14.2.0",
    "@angular/platform-browser": "~14.2.0",
    "@angular/platform-browser-dynamic": "~14.2.0",
    "@angular/router": "~14.2.0",
    "@developerwym/ns-screen-orientacion": "^1.0.2",
    "@nativescript-community/gesturehandler": "^2.0.5",
    "@nativescript-community/ui-canvas": "^4.4.4",
    "@nativescript-community/ui-chart": "^1.2.19",
    "@nativescript-community/ui-lottie": "^5.0.0",
    "@nativescript-community/ui-mapbox": "^6.2.15",
    "@nativescript-community/ui-material-cardview": "^7.0.25",
    "@nativescript-community/ui-material-core": "^7.0.25",
    "@nativescript-community/ui-material-dialogs": "^7.0.25",
    "@nativescript-community/ui-material-slider": "^7.0.25",
    "@nativescript-community/ui-material-snackbar": "^7.0.25",
    "@nativescript-community/ui-material-tabs": "^7.0.25",
    "@nativescript-community/ui-persistent-bottomsheet": "^0.0.21",
    "@nativescript/angular": "^14.2.0",
    "@nativescript/appversion": "^2.0.0",
    "@nativescript/auto-fit-text": "^1.0.3",
    "@nativescript/brightness": "^2.0.0",
    "@nativescript/core": "^8.3.4",
    "@nativescript/firebase-admob": "^1.2.2",
    "@nativescript/firebase-analytics": "^1.2.2",
    "@nativescript/firebase-auth": "^1.2.2",
    "@nativescript/firebase-core": "^1.2.2",
    "@nativescript/firebase-crashlytics": "^1.2.2",
    "@nativescript/firebase-database": "^1.2.2",
    "@nativescript/firebase-in-app-messaging": "^1.2.2",
    "@nativescript/firebase-messaging": "^1.2.2",
    "@nativescript/firebase-performance": "^1.2.2",
    "@nativescript/geolocation": "^8.0.2",
    "@nativescript/google-signin": "^1.0.0",
    "@nativescript/local-notifications": "^6.0.0",
    "@nativescript/payments": "^1.0.4",
    "@nativescript/picker": "^4.0.1",
    "@nativescript/social-share": "^2.1.0",
    "@nativescript/theme": "^3.0.2",
    "@nstudio/nativescript-cardview": "^2.0.1",
    "@nstudio/nativescript-checkbox": "^2.0.5",
    "@nstudio/nativescript-fancyalert": "^4.0.1",
    "@nstudio/nativescript-filterable-listpicker": "^3.0.1",
    "@nstudio/nativescript-label-marquee": "^1.0.1",
    "@nstudio/nativescript-shimmer": "^1.0.7",
    "@sergeymell/nativescript-svg": "^1.1.2",
    "@triniwiz/nativescript-image-cache-it": "^7.1.0",
    "@triniwiz/nativescript-pager": "^14.0.1",
    "@triniwiz/nativescript-tooltip": "^3.0.0",
    "@triniwiz/nativescript-youtubeplayer": "^4.1.4",
    "jwt-decode": "^3.1.2",
    "nativescript-app-tour": "^4.0.0",
    "nativescript-audio": "^6.2.6",
    "nativescript-swipe-layout": "^2.0.1",
    "nativescript-ui-listview": "^9.1.4",
    "nativescript-ui-sidedrawer": "^10.0.1",
    "plugin": "^0.3.3",
    "reflect-metadata": "~0.1.13",
    "rxjs": "~7.5.6",
    "source-map": "^0.7.4",
    "stacktrace-js": "^2.0.2",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~14.2.1",
    "@angular/cli": "~14.2.1",
    "@angular/compiler-cli": "~14.2.0",
    "@nativescript/android": "~8.3.1",
    "@nativescript/eslint-plugin": "0.0.4",
    "@nativescript/schematics": "^11.2.0",
    "@nativescript/types": "~8.3.1",
    "@nativescript/webpack": "~5.0.8",
    "@ngtools/webpack": "~14.2.1",
    "@typescript-eslint/eslint-plugin": "^5.35.1",
    "@typescript-eslint/parser": "^5.35.1",
    "codelyzer": "~6.0.2",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nativescript": "0.0.0",
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3",
    "prettier": "2.7.1",
    "sass": "^1.54.5",
    "typescript": "~4.8.2"
  }

Please, tell us how to recreate the issue in as much detail as possible.

I have recently updated to NS 8.3 and my colors are now being overriden by the theme I'm using (@nativescript/theme/core) instead of picking up the Primary color from my colors.xml file . Trying to change the colors inline as in the code below only changes the thumb's color:

<MDSlider  value="5" class="slider" minValue="0" maxValue="10"
       (valueChange)="onSliderValueChange($event)" verticalAlignment="center" stepSize="1"
       backgroundColor="white" trackFillColor="#77567a" thumbColor="#77567a"
       trackBackgroundColor="#9F88A1"></MDSlider>

[farfromrefug]

@guillemc23 hard to tell. Seems like a css issue. Can you reproduce it in an simple example project? (not angular please).