Question

I have several range inputs that I have to make consistent across browsers so I am using jQuery UI slider for them. The problem is not with that part, but actually with getting those elements.

This is how the inputs look:

<input type="range" name="..." value="..." min="..." max="..." />

Selecting them with input[type="range"] works in every browse besides IE7 (IE8 is fine). The code should run on WordPress 3.1, so I have to use jQuery 1.4.

I’ve currently solved it by adding a class to the range inputs and that works fine, but I was wondering what is the problem with this selector in IE7?

Answer 1

IE7 and lower will automatically convert to type="text". Try this and you will see

alert($('input').attr('type')); // alerts "text"

Therefore your selector doesn’t match.

You could add data-type instead of a class only for jQuery selection

<input data-type="range" type="range" name="..." value="..." min="..." max="..." />

and use

$('input[data-type="range"]')