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>

Answer 1

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