How to pass value of an input range to a variable in JS?

Question

How do you get the value of an input range slider into a variable? Below is the range I'm using. Suppose I drag the range to 12, then I need "12" as the variable that I want to then pass to a function.

 <input type="range" min="1" max="30" value="15" />

Edit: I don't want a button to confirm the value or something, I want that everytime the value is changed, it gets passed to the function, so it'll be dynamic!

PS: It may not be the best question out there, but I've honestly tried looking for an answer before posting the question.

Alvaro Flaño Larrondo · Accepted Answer · 2016-05-16 16:24:22Z

4

You just need to bind to the change event:

<input type="range" min="1" max="30" value="15" />

$("input").change(function(){
    var value = $(this).val();
    alert(value);
})

answered May 16, 2016 at 16:24

Alvaro Flaño Larrondo

5,7402 gold badges31 silver badges50 bronze badges

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

Comments

Muriano · Accepted Answer · 2016-05-16 16:24:30Z

2

If you give an id to your field:

 <input id="myRange" type="range" min="1" max="30" value="15" />

then:

 $('#myRange').val();

First step it is not really required, but it makes things easier.

You can do this in every form field element:

 $('selector').val();

And you will get its value.

UPDATE FOR YOUR QUESTION:

Use .change event to bind a function that make whatever you want to do with this value, for example:

$('#myRange').change(function(){
    var myVar = $(this).val();
    alert(myVar);
});

answered May 16, 2016 at 16:24

Muriano

3835 silver badges13 bronze badges

Comments

Luca Schimweg · Accepted Answer · 2016-05-16 16:27:21Z

1

Just use register an event on the input:

<input type="range" min="1" max="30" value="15" oninput="alert(this.value)" />

you could of course also call a function in the oninput field.

answered May 16, 2016 at 16:27

Luca Schimweg

7975 silver badges18 bronze badges

Comments

j-tap · Accepted Answer · 2016-05-16 16:41:42Z

1

jsfiddle

<input id="field" type="range" min="1" max="30" value="15" />

var input = document.getElementById('field');
console.info(input.defaultValue); // value default (15)
input.onchange = function () {
  console.info(input.value); // value change
};

answered May 16, 2016 at 16:41

j-tap

563 silver badges5 bronze badges

Comments

Shaggy · Accepted Answer · 2016-05-16 18:50:18Z

1

You can do this simply by adding a listener to the field's input event, updating your variable every time it fires.

var input=document.querySelector("input"),
    value=input.value;
console.log(value);
input.addEventListener("input",function(){
    value=this.value;
    console.log(value);
},0);

<input max="30" min="1" type="range" value="15">

answered May 16, 2016 at 18:50

Shaggy

6,8162 gold badges28 silver badges47 bronze badges

Comments

Chidi Nkwocha · Accepted Answer · 2016-05-16 16:28:52Z

0

Give the input an Id. Then use For JQuery

Var a = $('#whateverId').val();

For JavaScript

Var a = getElementById('whateverID).innerHtml;

answered May 16, 2016 at 16:28

Chidi Nkwocha

851 silver badge9 bronze badges

1 Comment

demo Over a year ago

this is "dynamic". variable will not be changed

Collectives™ on Stack Overflow

How to pass value of an input range to a variable in JS?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related