Inspired by a question on Stackoverflow on how to change a part of the Range control (which is a new input type control in HTML5) I decided to write this blog post on how to do this. Because it’s pretty easy to do and applies to all other WinJS controls. (At least the technique to find the applied styles and how to override them)

Example of an HTML5 range control in a WinJS metro style app

Because this is a standard control that can be used there are already styles for created in the “Dark” en “Light” theme. We need to go find these styles to see what’s already applied to this control. As we can see from the example above there are already some color styles applied, blue on the left of the tracker, grey on the right and the tracker itself is white.

Okey, let’s find these styles and change them in the way we like to see this range control.

In our solution explorer under References we have the Microsoft Windows Library for JavaScript SDK where we can find the css folder which contain the ui-dark and ui-light css files. As you can see in below screenshot.

Solution explorer for WinJS metro style application

When we open the ui-dark.css file we need to find the classes that apply for our range control. Luckily these file is well organized and with a small search we find the “Range” control section like below.

 1 /*
 2 Range control.
 3 */
 4 input[type=range] {
 5     width: 280px;
 6     height: auto;
 7     padding: 17px 0 32px 0;
 8 }
 9 input[type=range]::-ms-track {
10     padding: 0;
11     width: auto;
12     height: 11px;
13     border-style: none;
14     color: transparent; /* ticks hidden by default */
15 }

I’m only showing part of the classes for this control, because you all will get how it looks like and you now know where to find the rest. You would probably expect that changing one of these properties would give you the desired result of changing the control. That’s only partial true, overriding one of these properties would change the control, but for example not all of the colors can be changed by overriding these classes.

Therefore you need to look further into the ui-dark.css file and look for the “Range control colors” section in the file. And as you can see below we found a complete section with the classes that we can override in our own css file to change the look and feel of our range control.

 1 /*
 2 Range control colors.
 3 */
 4 input[type=range], input[type=range]::-ms-track {
 5     background-color: transparent;
 6 }
 7 
 8 input[type=range]::-ms-fill-lower {
 9     background-color: rgb(0, 130, 135); /* same in dark and light */
10 }
11 input[type=range]:hover::-ms-fill-lower {
12     background-color: rgb(33, 146, 151); /* same in dark and light */
13 }
14 input[type=range]:active::-ms-fill-lower {
15     background-color: rgb(37, 187, 196); /* same in dark and light */
16 }
17 input[type=range]:disabled::-ms-fill-lower {
18     background-color: rgba(255, 255, 255, 0.24);
19 }
20 .win-ui-light input[type=range]:disabled::-ms-fill-lower {
21     background-color: rgba(0, 0, 0, 0.24);
22 }

And just like the other example this are only a subset of the available classes. If you would like to override these values, just copy the classes to your own css file and give them the value/color you like and you will see it being reflected on your control when you run your app.

And as always if you have any questions don’t hesitate to contact me by mail, twitter or leave a comment on this post.

Happy styling…….