how to get range slider min max value in php variable?

Question

I have created a range slider with below code:

HTML:

  <input type="text" class="salary" id="salary" name="salary" style="border:0; color:#f6931f; font-weight:bold;" >
   <div id="slider-range"></div>

JS:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

 <script>
 $(function() {

 $("#slider-range").slider({
  range: true,
  min: 0,
  max: 20000,
  values: [0, 3000],
  slide: function(event, ui) {
  $("#salary").val("Rs. " + ui.values[0] + " - Rs. " + ui.values[1]);
  },
  stop: function(event, ui) {
  $("#salary").submit();  
  var [min, max] = $("#slider-range").slider("option", "values");
  console.log(min);
  //alert(min);
  console.log(max);
  //alert(max);
  },

 });
});
</script>

I want to receive the value of "var [min, max]" which i am receiving now in console "console.log(max);" & "console.log(min);" in two different php variable.

like below i wnat to receive value from the above code on same page:

 <?php 
  $min_value = 
  $max_value =   
 ?>

Upon selection scroller value is getting submitted automatically.

Answer 1

You need to use the values option: $("#slider-range").slider("option", "values");

Example:

$(function() {

  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 20000,
    values: [0, 3000],
    slide: function(event, ui) {
      $("#salary").val("Rs. " + ui.values[0] + " - Rs. " + ui.values[1]);
    }
  });
  
  $("#button").click(function(e){
    e.preventDefault();
    // get value
    var [min, max] = $("#slider-range").slider("option", "values");
    console.log(min, max);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<form method="post">
  <input type="text" id="salary" name="salary" class="salary" style="border:0; color:#f6931f; font-weight:bold;">

  <div id="slider-range"></div>

  <button id=button>Get value</button>
</form>