md-slider custom color slider - ANGULAR MATERIAL - angularjs

Question

I am working on md-slider, Here my question is how can we have the color of the slider as own, as default the having two classes md-warn(for red), and md-primary(for white). I want white color slider.
How can I achieve this?

Answer 1

Visores' answer was very useful, however this didn't quite match the functionality of the default slider insofar as the right hand side of the md-thumb ends up the same colour as the rest of the slider. By changing the
.md-track to .md-track-fill, you will match the default functionality. The code will therefore look as follows:
#red-slider .md-thumb:after, #red-slider .md-track-fill{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
CodePen example

Answer 2

you can achieve a custom color by overwriting the css-class of the slider.
codepen example
#red-slider .md-thumb:after, #red-slider .md-track{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
css classes to overwrite:
.md-thumb:after
.md-track
.md-focus-thumb
.md-focus-ring
I didn´t tested all the functionality of the slider. But basically you have to overwrite all the styles from the slider. You can find them at the git repo

Answer 3

Additional, you can custom the color of balloon on the md slider by this code:
#red-slider .md-sign, #red-slider .md-sign {
background-color: blue;
border-top-color: blue;
}
#red-slider .md-sign:after, #red-slider .md-sign {
border-top-color: blue;
}
This can change the color of balloon as you neeeded