How to get slider range value and store it in a variable within JavaScript

Question

How can you get the range slider to store output as a variable (which will then be set as a a session)

Thanks for the help

*have removed < and > so could display it with code

Below is my code (which doesn't work)

HTML Code:

    input type="range" min="1" max="100" value="50" class="slider" id="range"
    Value: span id="value" /span
    Value: span id="outputVar" /span

JavaScript Code:

    var slider = document.getElementById("range");
    var output = document.getElementById("value");
    var outputVarNo = document.getElementById("outputVar");
    output.innerHTML = slider.value;

Code blocks allow entering full HTML. Please edit your code to reflect the actual HTML — Patrick Q
– Patrick Q, Commented May 1, 2019 at 18:23

junvar · Accepted Answer · 2019-05-01 18:23:19Z

4

Your example 'works' in that it does display the range value as you've described. It doesn't update the value because your JS code will execute only once at startup. To execute your code and update the output whenever the range input is changed, use an event listener:

  var slider = document.getElementById("range");
  var output = document.getElementById("value");
  var outputVarNo = document.getElementById("outputVar");

  let update = () => output.innerHTML = slider.value;

  slider.addEventListener('input', update);
  update();

<input type="range" min="1" max="100" value="50" class="slider" id="range">
Value: <span id="value"></span>
Value: <span id="outputVar"></span>

answered May 1, 2019 at 18:23

junvar

11.7k2 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ChrisOnBass · Accepted Answer · 2019-05-02 14:40:34Z

2

You may want to add an onChange event to your slider.

var slider = document.getElementById("range");
slider.onchange = function(event){
  var output = document.getElementById("outputVar");
  output.innerHTML = slider.value;
}

The answer provided by @junvar is better for live updates. Plus, the addEventListener is better IMO than directly using oninput

edited May 2, 2019 at 14:40

answered May 1, 2019 at 18:25

ChrisOnBass

815 bronze badges

Collectives™ on Stack Overflow

How to get slider range value and store it in a variable within JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related