0

I have an price range slider. What I want when I slide range slider then I get its value in alert box. Now, what happen when I alert it show [objectobject] I don't know why? How can I get price slider value in alert box?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script>
$(document).ready(function(){
  $( "#slider-3" ).slider({
    range:true,
    min: 0,
    max: 2000,
    values: [ 200, 1600 ],
    slide: function( event, ui ) {
      $("#price").val(ui.values[0] + " - " + ui.values[1]);
    }
  });
  price_data = $("#price").val($("#slider-3").slider("values", 0) +
  " - " + $("#slider-3").slider("values", 1) );
  alert(price_data);
});
</script>

<p>
  <input type="text" id="price" readonly>
</p>
<div id="slider-3"></div>

5
  • put your alert inside the slide event handler. Under the $("#price").val .... line
    – Adam H
    Jan 24, 2019 at 19:49
  • it again show me [objectobject] @AdamH
    – steave
    Jan 24, 2019 at 19:53
  • What are you trying to set the value to in your slide callback? It's being set to a string, but slides are typically used for numbers on a scale. On the line where you're calling price_data = $("#price").val... it looks like you're setting the sliders value to be a jQuery object, which is then returned by the initial val call, hence why you get the output [object Object].
    – Bricky
    Jan 24, 2019 at 20:06
  • You're alerting the result of calling val(...). You want val(). Jan 24, 2019 at 20:06
  • This offers many methods: stackoverflow.com/questions/2939865/…
    – imvain2
    Jan 24, 2019 at 20:07

1 Answer 1

1

So your code technically works fine. Your alert is showing [object Object] because you are just outputting price_data which is a jQuery object because you are setting its value not getting its value.

You can easily see this by logging on price_data the way you currently have it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script>
$(document).ready(function(){
  $( "#slider-3" ).slider({
    range:true,
    min: 0,
    max: 2000,
    values: [ 200, 1600 ],
    slide: function( event, ui ) {
      $("#price").val(ui.values[0] + " - " + ui.values[1]);
    }
  });
  price_data = $("#price").val($("#slider-3").slider("values", 0) +
  " - " + $("#slider-3").slider("values", 1) );
  console.log(price_data);
  alert(price_data);
});
</script>

<p>
  <input type="text" id="price" readonly>
</p>
<div id="slider-3"></div>

Just use price_data.val() to get the values to alert.

See below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script>
$(document).ready(function(){
  $( "#slider-3" ).slider({
    range:true,
    min: 0,
    max: 2000,
    values: [ 200, 1600 ],
    slide: function( event, ui ) {
      $("#price").val(ui.values[0] + " - " + ui.values[1]);
    }
  });
  price_data = $("#price").val($("#slider-3").slider("values", 0) +
  " - " + $("#slider-3").slider("values", 1) );
  alert(price_data.val());
});
</script>

<p>
  <input type="text" id="price" readonly>
</p>
<div id="slider-3"></div>

1
  • 1
    Good catch haha, I need more coffee
    – basic
    Jan 24, 2019 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.