CODEWITHSUNDEEP
javascriptjquery
steave
steave

Reputation: 135

How to alert price range slider value in jQuery?

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>

Upvotes: 0

Views: 1288

Answers (1)

basic
basic

Reputation: 3408

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>

Upvotes: 1

Related Questions