Showing Tick Marks on input[type=range]

Question

I'm creating a windows 8 app and need to create a vertical slider that also displays tick marks. I'm able to get the range slider to appear vertically by appying the windows specific class: win-vertical.

There are also psuedo-selectors for input[type=range]::-ms-ticks-after and input[type=range]::-ms-ticks-before but I cannot find any documentation on how to use them correctly and any rules I add to them seem to not do anything. Any help would be greatly appreciated. Thx

Clarendon

Answer 1

Have you tried the -ms-track selector? Detailed here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465813.aspx

I tested this in IE10 (should be equivalent to Windows 8) and I am able to set the tick marks to red using the following CSS.

input[type=range]::-ms-track { color: red; }

Silvia

I ended up not needing to do this... but I tested what you proposed and it was all good. Turns out my requirement was a bit different. – Clarendon