Resetting HTML Range Input in JS doesn't move displayed slider

Question

HTML:

<input type = "range" id = "rngIntro" min = "0" max = "5" value = "0">

JavaScript:

document.getElementById("rngIntro").value = "0";

Here's a piece of my code that basically resets the rngIntro HTML range slider. It changes the value of it when the function is called, but it leaves the physical slider at whatever value it was prior. So, if the slider was at the far right it would stay there even though the value does change to zero.

What can I do to fix this, is there a reset I can call instead of .value = "0"?

Answer 1

I've just found this out for jquery mobile they require a refresh for the visual styling. Here's what they say in this page:

"If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling."

That solved it for me.

$( ".selector" ).slider( "refresh" );