2

I have an input field:

<input id="RangeRate1" type="range" min="125.00" max="500.00" value="250.00">

When I reload the page, the value of the input is set to what was set the last time the range slider was changed. For instance, if the rate was changed to 300 prior to page reload, when the page reloads, if I console out the value of the range slider:

let RateSlider = document.querySelector("RangeRate1")
console.log("existing rate: ", RateSlider.value)

I get 300! even though the html input value is still shown as 250.00 as above. When I use ctrl shift r, the correct number is displayed, in this case the value I see in the input HTML code, 250. So, is there a way to flush out the old value or overwrite it with the actual value in the input tag lin?

EarlyCoder
  • 977
  • 1
  • 12
  • 27
  • From the answers I'm reading here https://stackoverflow.com/questions/2699284 you need to place them into a form and use `autocomplete=off` as a property of the `
    ` tag. Warning, Chrome ignores this same named property for fields, but based on the comments in the above question I believe it honors them for the form. I haven't tested this solution myself so I'm leaving it here in the comments for you to try. :D
     – tresf Aug 21 '20 at 18:14

1 Answers1

2

Some browsers do this for "convenience" purposes even though it's less than convinient

You can just use some JavaScript to set the actual value to the attribute value (unless the attribute itself is also set by the browser to last value, in which case just set it to the hard coded value itself)


let RateSlider = document.querySelector("#RangeRate1")

RateSlider.value=parseInt(RateSlider.getAttribute("value"))

EDIT alternatively if the input is part of a form (assuming form has id if "myForm") you can reset it

myForm.reset()
bluejayke
  • 2,773
  • 2
  • 20
  • 50
  • That worked, sort of. Now I get the correct 250.00 number, but the thumb of the slider is still stuck at the old number. How do I reset the slider thumb? – EarlyCoder Aug 21 '20 at 18:24
  • @johnny no I mean exactly what I said, autocorrect on phone – bluejayke Aug 21 '20 at 18:32
  • @bluejayke the initial data of the rate slider is set using ``````, I read the value to do other calculations using the ```RateSlider.value=parseInt(RateSlider.getAttribute("value"))```, so where do I change the value in the input tag to fix the thumb from sticking to the old value? – EarlyCoder Aug 21 '20 at 18:34
  • @early what do you mean, did The JavaScript not work when put in – bluejayke Aug 21 '20 at 18:41
  • I have my JS code in an external file. Your suggestion worked in that when I read the value from the input, it is what I expected it to be, which is the value in the input tag. However, the thumb of the slider should read from the value of the input, but it does NOT. So, when I load the page, it somehow reads from the previous value of the input. – EarlyCoder Aug 21 '20 at 20:38