CODEWITHSUNDEEP
javascripthtmlcss
Pallavi Choudhary
Pallavi Choudhary

Reputation: 103

Not able to get correct value of range slider in html

I want to store the value of a range slider in local storage.

.html

<div class="seekbar_div">
                    <input class="seekbar" id="#light_seek" type="range" min="0" max="100" value="0" onchange="rangevalue.value=value">
            </div>

.js

var sliderVal = document.getElementById("#light_seek").value;
    alert(sliderVal);
               localStorage.setItem("light_seek", sliderVal);

Here even if i change the slider to some other position than 0 still the alert is showing zero

Upvotes: 0

Views: 107

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

jsBin demo

id="#light_seek" you have an extra # here.

HTML:

<div class="seekbar_div">
  <input class="seekbar" id="light_seek" type="range" min="0" max="100" value="0">
</div>

JS:

var lightSeek = document.getElementById("light_seek");
var sliderVal = lightSeek.value;

console.log(sliderVal);

lightSeek.addEventListener("change", function(){  // event listener
   sliderVal = this.value;                        // modify var
   localStorage.setItem("light_seek", sliderVal); // Store to LS
   console.log( sliderVal );                      // test
}, false); 

// whenever you want to grab your value back from LS do:
// sliderVal = localStorage.getItem("light_seek");

Also, as you can see I've removed any HTML-inline JS cause it's bad practice for it's hardly maintainable. Try always to keep your HTML markup JS-free.

Upvotes: 3

Related Questions