CODEWITHSUNDEEP
javascriptjqueryjquery-mobilecordova
teekib
teekib

Reputation: 2821

Unable to get slider value in Jquerymobile

Hi i am facing hard time getting the slider value, i have five sliders in a page, i am doing it as below to get the value

<div>
     <label for="slider" >1. choose a value.</label>
     <input type="range" id="p1slider1" name="p1slider1" class="slider" value="0" min="0" max="5" data-highlight="true" />
     <label class="sliderlabel"></label>
    </div>

Try1

 var slider1 = $('input:text[id=p1slide1]').val();
  alert(slider1);

Try2

<script>
 $("#p1slider1").on("change", function (event) {
    var value = event.target.value;
    console.log("Slider is moving, it's value is now: " + value);
});
</script>

Try 3 tryed surrounding with div element and as below

$("#div-slider").change(function() {
  var slider_value = $("#p1slider1").val();
  // do something..
});

none of them is working for me, not sure where i am doing wrong

Also as i have five sliders and a submit button in each page, i want to send the values of all sliders into database on submit button click, what is the best way to implement it? Any information regarding this is appreciated

Edit

 var slide1;

 $( document ).ready(function() {
    $("#custom-li").click(insertRecordp1);
    $("#p1next").click(insertRecordp2);  // Register Event Listener when button click.

function insertRecordp1(tx) // Get value from Input and insert record . Function Call when Save/Submit Button Click..
{
     var orgname = $('input:text[id=name]').val();
     alert(orgname);
}    

   function insertRecordp2(tx) // Get value from Input and insert record . Function Call when Save/Submit Button Click..
{

} 
// below code not working-->your code
$("input#p1slider1").on("change", function (event) {
    slide1 = $(this).val();
    alert(slide1);
});

//below code works
$(document).on('change', function(){ 
   slider1 = $('input#p1slider1').val();
     console.log(slider1);
});


}); 
 </script>

is it correct way of doing can i use slide1 in function2?

Upvotes: 0

Views: 1317

Answers (3)

user3374969
user3374969

Reputation: 69

$(document).ready(function () {
    Var value = $('plslider1').val();
    Test(value);
    // transfer the value to the function 
});
Function Test(value) {
    Alert(value);
    // alerts the value from the slider
}

Upvotes: 1

Carson Ip
Carson Ip

Reputation: 1946

In try 1, the code below works for me.

  var slider1 = $('input#p1slider1').val();
  alert(slider1);

So just call this when you need the value.

Demo 1 here.

In try 2, use the code (the $(this) means $("input#p1slider1")):

$("input#p1slider1").on("change", function (event) {
    var value = $(this).val();
    alert(value);
});

Demo 2 here.

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20418

Try this

$(document).on('change', '#p1slider1', function(){ 
  console.log($(this).val());
});

Working Example http://jsbin.com/xakifequ/6/edit

Upvotes: 0

Related Questions