Using polyfill for input type 'range' in IE9
I am trying to use HTML5 input type. This is not supported in IE8 and IE9 and is replaced with text input. To make this field work for everyone, I use a range input polyfill. I am using polyfill: Rangeslider.js ( http://andreruffert.github.io/rangeslider.js/ )
The html of my input field looks like this:
<input type="range" id="somefield" name="somefield" required="required" min="0" max="100" step="1" class="className" value="10">
The Javascript that runs the polyfill is called on input [type = "range"]. Example:
$('input[type="range"]').rangeslider();
Somehow the polyfill works correctly if you call it specifically on the input element and not on an element with a specific class. So a call like this will not work (it will display, but the range value is not stored in the input element):
$('.className').rangeslider();
However, IE replaces input to the DOM with the following HTML:
<input name="somefield" class="className" id="somefield" required="required" type="text" min="0" max="100" step="1" value="10">
Since the input element now has a different input type, the $ ('input [type = "range"]') selector will not work. using a class or id as a selector also doesn't work (in this case, the polyfill does not update the value of the original element)
In other browsers (Firefox, Chrome) the polyfill works (when I let it override the built-in support).
Question: How to use this polyfill (with which element selector) in IE9?
source to share
I found a bug. The class can be used as a selector. Here is a code snippet that calls polices for multiple range input fields. This avoids using the input type as a selector and seems to work in all browsers. This also works for multiple fields on the same page.
$('input.className').each(function(e) {
$(this).rangeslider();
});
source to share