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

Question

我想获取每个最小值/最大值的值范围滑块到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));
});

Answer 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>