Change default background color of md-slider of Angular Material

 https://stackoverflow.com/questions/45389498/change-default-background-color-of-md-slider-of-angular-material

Then in your CSS, you can customize each of them as such:

:host ::ng-deep .average .mat-slider-thumb {
  background-color: #ff3967;
}

:host ::ng-deep .min .mat-slider-thumb {
  background-color: blue;
}

:host ::ng-deep .min .mat-slider-thumb-label {
  background-color: blue;
}

:host ::ng-deep .min .mat-slider-track-fill {
  background-color: blue;
}

:host ::ng-deep .max .mat-slider-thumb {
  background-color: orange;
}

:host ::ng-deep .max .mat-slider-thumb-label {
  background-color: orange;
}

:host ::ng-deep .max .mat-slider-track-fill {
  background-color: orange;
}

All info about :host and ::ng-deep in the offical Angular documentation for component styles