CODEWITHSUNDEEP
javascripthtmljquerysliderrange
user12109321358
user12109321358

Reputation: 461

Get value of an input type Range

I have this code:

<p class="slider1">Your approximate total debt: 
  <output name="slider_output1" id="slider_output1" for="form_slider1">0</output><br>                                                   
  <input type="range" class="form_slider1" name="form_slider1" id="form_slider1"
   value="0" min="0" max="60000" step="100" 
   oninput="slider_output1.value=form_slider1.value" 
   onchange="slider_output1.value=value"/>  
                                                                                                                                                           
</p>

I need to get the range/slider value for condition statement. I tried using jQuery:

var slider1 = $("form_slider1").val();

but I got "undefined" when I alert the value.

alert(slider1);

Thank you guys in advance!

Upvotes: 4

Views: 18141

Answers (4)

lakshya_arora
lakshya_arora

Reputation: 791

javascript

Replace the object with your element object and the eventCallback with your event(onclick for example)

object.eventCallback=function(){
var r = document.getElementById('form_slider1').value;
alert(r);
};

jquery

var slider1 = $(".form_slider1").val();

This is regarding your comment

<input type="range" id="r" min="1" max="20">
<input type="submit" id="sub">

<script>
var r1=document.getElementById("sub");
r1.onclick=function(){
var r = document.getElementById('r').value;
if(r>10){
    alert("You crossed the half of it");
}
else alert("Value less than 10");
};
</script>

You can give your own conditions if you want (eq r==20 alert("the peak"));

Upvotes: 4

Leo
Leo

Reputation: 19

From your code we can find that the class name and id of input component is same: form_slider1.

So, if you want use id to get this element's value, you should use this
var slider1 = $("#form_slider1").val();.

if you want to use class to get this element's value, you should use this
var slider1 = $(".form_slider1").val();

Upvotes: 2

Cybershadow
Cybershadow

Reputation: 1177

You should try this:

 var slider1 = $("#form_slider1").val();

Upvotes: 2

Neeraj
Neeraj

Reputation: 197

try this

var slider1 = $(".form_slider1").val();

Upvotes: 5

Related Questions