I'm trying to use the HTML5 input type 'range'. This is not supported in IE8 & IE9 and is replaced by input with type 'text'. To make this field work for everybody i'm using a polyfill for the input with type 'range'. The polyfill i'm using is: Rangeslider.js (http://andreruffert.github.io/rangeslider.js/)
The html of my inputfield 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 only works correctly if you call it specifically on the input element, and not on an element with a certain class. So calling it like below will not work (it will render, but the value of the range is not stored in the input element):
$('.className').rangeslider();
However, IE replaces the input in 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">
Because the input element now has a different input type, the selector $('input[type="range"]') will not work. using the class or id as selector also doesn't seem to work (in that case the polyfill doesn't update the value of the original element)
In other browsers (Firefox, Chrome) the polyfill does seem to work (when I let it override the native support).
Question: How do I use this polyfill (with what element selector) in IE9?
I found the mistake. It is possible to use the class as selector. Here is a piece of code that calls the polyfills for multiple range input fields. This avoids using the input type as selector and seems to work in all browsers. Also this works for multiple fields on one page.
$('input.className').each(function(e) {
$(this).rangeslider();
});