CODEWITHSUNDEEP
angularjsangularjs-directiveangular-material
Kishore Indraganti
Kishore Indraganti

Reputation: 1322

md-slider custom color slider - ANGULAR MATERIAL

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?

Upvotes: 2

Views: 6165

Answers (3)

Sinh Nguyễn Đức
Sinh Nguyễn Đức

Reputation: 731

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

Upvotes: 1

Mike Roberts
Mike Roberts

Reputation: 266

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

Upvotes: 2

Turtaru
Turtaru

Reputation: 4088

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

Upvotes: 2

Related Questions