how to save slider value position on refresh (sessionstorage)

Question

So here's simple version of my curren code

<script src="main.js"></script>
<script type="text/javascript">
wwr_start();
function onSliderChanged(slider) {
wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`);

}
<label class="drx"> Stax </label>
        <input type=range min=0 max=3 value=1 step=any id="3" 
oninput="onSliderChanged(this)"

So i have about 40 slides (range input) that looks like code above. But whenever i refresh the page, the slider value get backs to default. how do i save the lastes position of slider value even if page is refreshed? i tried to use "sessionstorage" but, since i'm pretty new at coding world, i couldn't really figure out how to use that function.

tried to copy & paste how other people used sessionstorage but couldn't adopt to my current code

Just to add, element id's can't be numeric so you need to change to or similar. [You can't have just a number](https://stackoverflow.com/q/7987636/12571484) — Adam, Jan 27 '23 at 09:17
the reason i put "id=3" is, i'm using this as volume controller for REAPER(digital audio mixer). The software support webctroller api, so i googled a little and found out someone already made volume controller with html. and i'm not sure how this works, but that "id" represent track number of audio mixer. not sure im "d3" would work or not, i just copied alreay existing code and modified a little to my version — noobjulian, Jan 30 '23 at 01:04
just tried to use "id=d3" instead of "id=3". It won't work :(. it i put any other alphbet other than track number, the slider (web volume controlleR) won't work — noobjulian, Jan 30 '23 at 02:36

score 1 · Answer 1 · answered Jan 27 '23 at 09:15

Here's a simple example of how you:

On window load (i.e. the browser has loaded your page and is ready to go) it attachs an event to the slider and retrieves the slider position from session storage if it exists.
If the value is changed, it updates the sessionStorage variable.

You'll need to copy it to your own project as it's likely this example won't work here due to cross side security.

  window.onload = () => {
    const slider1 = document.getElementById('slider1');

    // Attach listener to each slider
    slider1.addEventListener('input',storeSliderPosition);

    //retrieve value from sessionStorage
    if(sessionStorage.slider1) {    //first check if a value exists
      slider1.value = sessionStorage.slider1; //if so then set the value of the slider
      console.log("The stored slider value is: "+sessionStorage.slider1);
    }
  }

  function storeSliderPosition(event) {
    const id = event.target.id;   //get the id of the slider we're using
    sessionStorage[id] =  event.target.value;  //set the session storage value of the slider. Note sessionStorage['slider1'] is the same as sessionStorage.slider1
    console.log(`The slider ${id} has changed and the new value is: ${sessionStorage[id]}`);
  }

<input type="range" min="1" max="100" value="50" id="slider1">

how to save slider value position on refresh (sessionstorage)

1 Answers1