CODEWITHSUNDEEP
jquery
weallnoob
weallnoob

Reputation: 33

Send jQuery range slider min/max value to PHP

I want get value range slider each min/max value to PHP. I don't know how and don't know why. I am using the jQueryUI range slider: https://jqueryui.com/slider/#range

  <form method="POST" action="value.php">
    <input type="text" id="amount" name="slide-value" /><br/>
    <div id="slider-range" style="width: 500px;"></div>
    <input type="submit" name="submit" />
  </form>
  <?php
    value = (float)$_POST['slide-value'];
    echo $value;
  ?>
</div>

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 300],
    slide: function(event, ui) {
      var value1 = $("#slider-range").slider("values", 0);
      var value2 = $("#slider-range").slider("values", 1);
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
  });

  $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
});

Upvotes: 2

Views: 569

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

To separate the min/max values create two new fields in your form and update them separately when the slider moves. Note that I made the fields visible in this example for clarity, but they can be changed to hidden if required. Also note that I made a couple of changes to improve performance of the code, such as caching the jQuery objects. Try this:

jQuery($ => {
  let $amount = $('#amount'),
    $min = $('#min'),
    $max = $('#max');

  let $slider = $("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 300],
    slide: function(event, ui) {
      $amount.val(`값${ui.values[0]} - $${ui.values[1]}`);
      $min.val(ui.values[0]);
      $max.val(ui.values[1]);
    }
  });

  $amount.val("값" + $slider.slider("values", 0) + " - $" + $slider.slider("values", 1));
});
<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.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<form method="POST" action="value.php">
  <input type="text" id="amount" name="slide-value" /><br/>
  <input type="text" id="min" value="0" />
  <input type="text" id="max" value="300" />
  <div id="slider-range" style="width: 500px;"></div>
  <input type="submit" name="submit" />
</form>

Upvotes: 1

Related Questions