有最大值和最小值的价格
,如果你使用像jQuery UI的假设你有JavaScript的一个小知识,你可以很容易地实现这一点。以下是您可以实现的一个示例。 https://jqueryui.com/slider/#range
要看看它是如何实现的,你可以点击该网页上或为快速参考我会离开这里“查看源代码”。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>
如果您需要HTML版本,您需要查看HTML5滑块,但浏览器支持受限。这里是一个链接,如果您想一些更多的信息:
http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input
但我恐怕没有这样的JavaScript的知识。你可以显示你的答案如何使用POST方法形式吗? –
我不太清楚你的意思。你的意思是如何发布从滑块记录的值? –
是的,我的意思是。我想在搜索时使用$ _POST ['min']和$ _POST ['max']。 –
根据您有支持的浏览器,也许你可以使用范围从HTML5:
<input type="range" min="10.50" max="50.00" step="0.50" />
你也可以有看看polyfills支持旧的浏览器:
其实我需要一个范围栏中的2个滑块。 –
我读它符合一个教程,你看看这里
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [ 100, 300 ],
slide: function(event, ui) {
$("#amount").html("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
$("#amount1").val(ui.values[ 0 ]);
$("#amount2").val(ui.values[ 1 ]);
}
});
$("#amount").html("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
完整的教程,如果您有任何问题http://talkerscode.com/webtricks/price-range-slider-using-jquery-css-and-php.php
这不会是动态的。我想定义最小值和最大值,并使用按钮提交搜索。我没有尝试过任何东西。 –
你有没有考虑过使用[jQuery UI的滑块(https://jqueryui.com/slider/#range)? – mathielo
http://refreshless.com/nouislider/似乎做的工作(与一些CSS和JS)。 – cepradeep