18-解决方案

11.4.2　解决方案

jQuery UI slider窗口组件（http://jquery-cookbook.com/go/widget-slider）能够将两个文本输入框转换为一个范围滑块。范围的起始和结束值可以用鼠标或者光标键拖动。

默认的滑块应用到一个简单的 <div> ，没有任何选项：

<div id="slider"></div>
$("#slider").slider();

要使用范围滑块，除了UI主题之外，还必须包含jQuery、jQuery UI核心以及滑块 slider.js 文件：

<link rel="stylesheet" href="ui.core.css" />
<link rel="stylesheet" href="ui.slider.css" />
<link rel="stylesheet" href="ui.theme.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.slider.js"></script>

以上代码在页面中添加了一个漂亮的滑块，但是目前它实际上没有任何用处。

在汽车搜索的例子中，我们打算将选中的值放入输入字段，显示给用户：

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

基于标记，可以创建范围滑块：

var slider = $("#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.slider("values", 0) + ' − $' + slider.slider("values",
1));

将 range 选项设置为 true 告诉插件创建两个手柄（而不是一个）。 min 和 max 选项指定可选范围； values 选项是开始位置。

slide 回调在手柄移动时触发。在例子中，它更新 amount 输入字段并显示所选的价格范围。