How to make slider position remain in the last selected position

HTML & CSS
1

Hi,
I want to have my slider position remain in the last selected position but the slider gets back to the default position. I think it is due to new page redirection not sure. Can anybody help how to make the slider remain in the selected position? Below is the code I am using.

<html>
  <head>
    <title>Slider Page</title>
  </head>
  <body>
    <p>Slider</p>
    <form action="/Npage" method="POST" id="myform">
      <input type="range" name="slider_name" min="0" max="100" value="0" id="myrange"></br>
      <p>Value: <span id="Val"></span></p></br>
    </form>

    <script>
  let in = document.getElementById("myrange"),
    out = document.getElementById("Val");

    o.innerHTML = i.value;

    in.oninput = function(){
    out.innerHTML = in.value;
    }

   in.onmouseup = function () {
      document.getElementById("myform").submit();
    }
</script>

thanks

2

Yeah the form submission is going to make the element reset itself. You have to remember that form controls are client side elements and so don’t naturally persist their values between page reloads. What you can do is have JavaScript, on form submission, read the value of your slider and store the value somewhere like localStorage or sessionStorage. Then when the page reloads, have the page read the localStorage value and set the slider back to the original value. Below is a link to learn about localStorage and sessionStorage and how you can use it to save values between page refreshes.

Hopefully you get the idea and can use these to achieve your desired result. :slight_smile:

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.