HTML range: set value attribute dynamically

Question

Good evening!!

I'm using HTML input type range to create a slidebar. I would like to dynamically change the attribute "value" (default position of the cursor) before displaying the slidebar.

I can retrieve the value I need (from localStorage) but I don't manage to set it!!

Here is the range object:

<input type="range" min="0" max="1050" value="0" step="30"  onchange="showValue(this.value); changeScrollBar(this.value);"/>

Now it is set to 0 but I would like to use a variable to change it (i.e I'll set a new variable foo=localStorage.getItem("foo2") then I would like to use value=foo in range)!

Any clue?

Thanks a lot!!!

Answer 1

You get the DOM element for the <input> tag and then use:

elem.value = foo;

---

If you add an ID to the input tag like this:

<input id="mySlider" type="range" min="0" max="1050" value="0" step="30"  onchange="showValue(this.value); changeScrollBar(this.value);"/>

Then, you can do the whole thing like this:

var input = document.getElementById("mySlider");
input.value = localStorage.getItem("foo2");