将 jQuery 范围滑块最小值/最大值发送到 PHP答案

【问题标题】：Send jQuery range slider min/max value to PHP将 jQuery 范围滑块最小值/最大值发送到 PHP
【发布时间】：2020-06-01 09:17:58
【问题描述】：

我想获取 PHP 的每个最小值/最大值的值范围滑块。我不知道怎么做，也不知道为什么。我正在使用 jQueryUI 范围滑块：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));
});

【问题讨论】：

标签： jquery

【解决方案1】：

要分隔最小值/最大值，请在表单中创建两个新字段，并在滑块移动时分别更新它们。请注意，为了清楚起见，我在此示例中使字段可见，但如果需要，可以将它们更改为 hidden。另请注意，我进行了一些更改以提高代码的性能，例如缓存 jQuery 对象。试试这个：

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>

【讨论】：