# jQuery Mobile 表单滑动条
## jQuery Mobile 滑动条控件
滑动条允许您从一个范围的数字中选择一个值:
![](https://box.kancloud.cn/2015-12-17_5672bb30d2379.png)
如需创建滑动条,请使用 <input type="range">:
## 实例
```
<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</form>
```
使用以下属性来规定限制:
* max - 规定允许的最大值
* min - 规定允许的最小值
* step - 规定合法的数字间隔
* value - 规定默认值
**提示:**如果您想要高亮突出显示滑动条的值,请添加 data-highlight="true":
## 实例
```
<input type="range" data-hightlight="true">
```
## 拨动开关
波动开关通常用于 on/off 或 true/false 按钮:
<iframe src="/try/demo_source/tryjqmob_switch.htm" style="margin-top:-13px;height:70px;width:100%;" scrolling="no" frameborder="0" seamless=""></iframe>
如需创建一个开关,请把 <select> 元素与 data-role="slider" 一起使用,并添加两个 <option> 元素:
## 实例
```
<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>
```
**提示:**请使用 "selected" 属性来设置选项中的一个为预选中状态(高亮突出显示状态):
## 实例
```
<option value="off" selected>Off</option>
```
- jQuery Mobile 简介
- jQuery Mobile 安装
- jQuery Mobile 页面
- jQuery Mobile 页面切换
- jQuery Mobile 按钮
- jQuery Mobile 按钮图标
- jQuery Mobile 工具栏
- jQuery Mobile 导航栏
- jQuery Mobile 可折叠块
- jQuery Mobile 网格
- jQuery Mobile 列表视图
- jQuery Mobile 列表内容
- jQuery Mobile 表单
- jQuery Mobile 表单输入元素
- jQuery Mobile 表单选择菜单
- jQuery Mobile 表单滑动条
- jQuery Mobile 主题
- jQuery Mobile 事件
- jQuery Mobile 触摸事件
- jQuery Mobile 滚屏事件
- jQuery Mobile 方向改变事件
- jQuery Mobile Data 属性
- jQuery Mobile 图标
- jQuery Mobile 事件
- jQuery Mobile 页面事件
- jQuery Mobile CSS 类
- 免责声明