How to dynamically move HTML 5 range input handle without using Jquery UI

Question

WHAT:

I have an HTML5 range input slider. If I use jQuery to change the value of said slider, the handle's position does not change. This can be achieved using the .slider() method in the jQuery UI framework. However, I want to achieve the same result using the jQuery library.

QUESTION:

How do I dynamically set the value of an HTML 5 range input and have the handle move position using jQuery 1.11.2 or Javascript.

CODE ATTEMPTS:

Below is 2 snippets of code that I've used to try solve the problem.

$("#rangeInput").attr("value", "100");

$("#rangeInput").val("100")

THE FORM:

    <form id="noisePolForm">
<input id="rangeInput" type="range" value="0" step="3" min="80" max="140" class="noisePol">
    </form>

Note the second one should be $("#rangeInput").val("100"). — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 7, 2015 at 3:31

j08691 · Accepted Answer · 2015-10-07 03:33:15Z

7

You need to use .prop(), not .attr():

$("#rangeInput").prop("value", "100"); //Or $("#rangeInput").prop("value", 100);

jsFiddle example

Your second example works fine, you just forgot the #

$("#rangeInput").val("100") //Or $("#rangeInput").val(100)

jsFiddle example

edited Oct 7, 2015 at 3:33

answered Oct 7, 2015 at 3:31

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Spencer Wieczorek Over a year ago

The OPs code works in older version of jQuery. Note this is because "As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values while .attr() retrieves attributes.".

j08691 Over a year ago

@SpencerWieczorek - after jQuery 1.6 .prop() supplanted .attr() for most of what attr() was being used for.

sephiith Over a year ago

Great to know to use .prop() instead of .attr() now. Thanks!

Collectives™ on Stack Overflow

How to dynamically move HTML 5 range input handle without using Jquery UI

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related