HTML5 range - unsupported pseudo: range

Question

Hello I got a rather simple question. I use the HTML5 range slider type: <input type="range"> and I want to trigger it via jQuery.

I used the following code:

$("form input:range").each(function () {
    // Do something
});

For some reason I get the following error:

! Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: range

Perhaps important: I use jquery-1.12.1.min.js.

Does anyone now why this is and how I could solve this?

The error states the exact issue, there is no `:range` selector in jQuery. — Rory McCrossan, May 31 '16 at 08:25
Please read this post: http://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value — d.danailov, May 31 '16 at 08:33

score 6 · Accepted Answer · edited May 23 '17 at 12:15

6

Try this:

jQuery("input[type=range]")

: is for getting some kind of meta information, usually related to what the user is doing with the element.

For example: :hover only applies to elements the user has placed the cursor over and :visible is elements the user can see.

EDIT

Pranav C Balan's answer better explains what is going on: HTML5 range - unsupported pseudo: range

edited May 23 '17 at 12:15

Community

answered May 31 '16 at 08:25

score 5 · Answer 2 · answered May 31 '16 at 08:25

5

There is no :range pseudo selector in css or jQuery. Instead you can use attribute equals selector

$("form input[type='range']").each(function () {
    // Do something
});

For all supported selectors list visit : JQuery Selectors

answered May 31 '16 at 08:25

Pranav C Balan

score 1 · Answer 3 · answered May 31 '16 at 08:35

Yes, you need to use attribute equals selector:

jQuery("input[type=range]")

There's use of :in-range or :out-of-range css selector that you can use for min and max value range:

$("form input:in-range").each(function () {
    // Do something
});

But alas! There's no :range selector.

3 Answers3