我正在开发搜索功能。我需要使用搜索栏选择最低价格和最高价格。 我在google上搜索了很多，但我发现seekbar只有一个值。下面是我得到的代码。
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function () {
$("#slider").slider(
{
min: 0,
max: 100,
step: 1,
change: showValue
});
$("#update").click(function () {
$("#slider").slider("option", "value", $("#seekTo").val());
});
function showValue(event, ui) {
$("#val").html(ui.value);
}
});
</script>
</head>
<body style="font-size:62.5%;">
<p>
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
</p>
<p>
This sample demonstrates the simple usage of the slider seek to function.
For more information about slider, please procedd to http://docs.jquery.com/UI/Slider
</p>
<div id="slider"></div>
Seek To : <input id="seekTo" type="text" value="10" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0</span>
</body>
</html>有人帮助我如何用单个条形图获得最小值和最大值..
我正在开发 PHP 网站。如果您有 php 中的任何示例代码，它将很有帮助..
另外一个:
还有一个疑问，如果这不是一个值范围，并且如果它像 A A+ B B+ C C+ ...我们如何在这种类型的搜索栏中获取它们..
最佳答案
使用range: true选项!
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function () {
$("#slider").slider(
{
range: true,
min: 0,
max: 100,
step: 1,
values: [10, 50],
change: showValue
});
$("#update").click(function () {
$("#slider").slider("option", "values", [$("#seekTo1").val(), $("#seekTo2").val()]);
});
function showValue(event, ui) {
$("#val").html(ui.values[0] + " - " + ui.values[1]);
}
});
</script>
</head>
<body style="font-size:62.5%;">
<p>
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
</p>
<p>
This sample demonstrates the simple usage of the slider seek to function.
For more information about slider, please proceed to http://docs.jquery.com/UI/Slider
</p>
<div id="slider"></div>
Seek To : <input id="seekTo1" type="text" value="10" /> <input id="seekTo2" type="text" value="50" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0 - 50</span>
</body>
</html>关于javascript - 具有两个值范围(最小值和最大值)的搜索栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27060099/