How to alert price range slider value in jQuery?

Question

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>

put your alert inside the `slide` event handler. Under the `$("#price").val ....` line — Adam H, Jan 24 '19 at 19:49
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 '19 at 20:06
You're alerting the result of calling `val(...)`. You want `val()`. — Heretic Monkey, Jan 24 '19 at 20:06
This offers many methods: https://stackoverflow.com/questions/2939865/how-to-get-value-from-jquery-ui-slider — imvain2, Jan 24 '19 at 20:07

score 1 · Answer 1 · edited Jan 24 '19 at 20:58

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>

Good catch haha, I need more coffee – basic Jan 24 '19 at 20:49 — basic, Jan 24 '19 at 20:49

How to alert price range slider value in jQuery?

1 Answers1