javascript - Hide or change the value label for a range input in IE10

Question

I have a range input with a custom label displaying text which corresponds to the input's value. This works well except that Internet Explorer 10 also displays its own tooltip-like label containing the value. The trouble is that this tooltip obscures my label. It also displays an integer value, where the actual value of the control is a float.

I cannot figure out how to hide the label or modify its text. It is separate from the tooltip and does not respond to the title attribute. It does not respond to z-index either, so I can't just position my label above it. I see no property mentioned in the documentation that would provide access to the label.

Demo: jsfiddle.net/KzWrs

Answer 1

for WinJS you can use the ::-ms-tooltip pseudo element selector (as mentioned here Remove tooltip from Slider

Applies one or more styles to the tooltip of a slider (input type=range). Note that only display and visibility style properties are applicable for an -ms-tooltip.

...however for IE10 it doesn't appear to work (at least when I tested).

::-ms-tooltip is listed in the CSS documentation on MSDN for pseudo-elements however there's no link to a content page discussing the pseudo-element

I suspect implementation is incomplete...

---

EDIT: when I tested the first time it was on Windows 8 Consumer Preview vm, testing on Windows 8 RTM it works!

EDIT: corrected dash prefix ::-ms-tooltip

input[type=range]::-ms-tooltip {
    display: none;
}