How to dynamically move an HTML 5 input descriptor without using jQuery UI

Question

What:

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

Question:

How can I dynamically set the input value of an HTML 5 range and have the position of the element moving using jQuery 1.11.2 or Javascript.

CODE ATTEMPTS:

Below are 2 code snippets that I used to try to 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

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

JsFiddle example