CODEWITHSUNDEEP
slidermaterial-design-lite
AlexZ
AlexZ

Reputation: 66

How to change the slider color in Google MDL Lite

I need change the slider color in Google MDL Lite.
http://getmdl.io/components/index.html#sliders-section

The colors of the lines on the left and right of the circle are changing, but the circle is staying blue.

Any ideas.
Thanks.

Upvotes: 2

Views: 1816

Answers (1)

myelin
myelin

Reputation: 41

At first, for customizing colors there is perfect Customizer and it will do what you need.

But answer for your question are these lines (rather test it in all browsers):

.mdl-slider {
    &:active::-webkit-slider-thumb,
    &::-webkit-slider-thumb {
        background: $your-color !important;
    }

    &:active::-moz-range-thumb,
    &::-moz-range-thumb {
        background: $your-color !important;
    }

    &:active::-ms-thumb,
    &::-ms-thumb {
        background: $your-color !important;
    }
}

However, there are focus color and other fixes for IE. So if you want to be 100% sure, copy this file with slider style and change color variables ($range-color, $range-bg-color, $range-faded-color etc.) by your requirements. Or use first mentioned solution.

Upvotes: 4

Related Questions