CODEWITHSUNDEEP
csswindows-8
Jonathan Petitcolas
Jonathan Petitcolas

Reputation: 4574

How to stylize left part of input range in Metro Apps?

I am currently trying to stylize an input type range in one of my Metro App. But, I can't find how to change the default blue/purple color at the left of my control. Any idea?

I succeeded in changing marker and the right part colors with following CSS:

html input[type=range]::-ms-track {
  background: yellow;
}

html input[type=range]::-ms-thumb {
  background: red;
}

So, I suppose there must be something similar. But what? :/

Upvotes: 2

Views: 967

Answers (1)

ChristiaanV
ChristiaanV

Reputation: 5541

You can use these CSS classes to style the color of the left side of the range control:

input[type=range]::-ms-fill-lower {
    background-color: rgb(0, 130, 135); /* same in dark and light */
}
input[type=range]:hover::-ms-fill-lower {
    background-color: rgb(33, 146, 151); /* same in dark and light */
}
input[type=range]:active::-ms-fill-lower {
    background-color: rgb(37, 187, 196); /* same in dark and light */
}
input[type=range]:disabled::-ms-fill-lower {
    background-color: rgba(255, 255, 255, 0.24);
}
.win-ui-light input[type=range]:disabled::-ms-fill-lower {
    background-color: rgba(0, 0, 0, 0.24);
}

Please note that above are the default values, you have to override them with your color.

If you are looking for other color settings of the control or different controls, search for the type of control in the dark-ui.css file. There is a separate section with colors for each control

Upvotes: 4

Related Questions