jQuery Mobile 表单滑动条（Sliders）详解
滑动条（Sliders） 是 jQuery Mobile 的 触控输入组件，用于 范围选择（如音量、亮度、评分），基于 <input type="range">，自动增强为 大号拖拽条 + 数值显示，支持 单滑块、双滑块、步长、主题。
移动端必备，无需 JS 即可使用！
1. 基本结构
<label for="volume">音量：<span id="vol">50</span>%</label>
<input type="range"
name="volume"
id="volume"
min="0"
max="100"
value="50">关键点：
type="range"min/max/valuedata-show-value="true"→ 显示数值
2. 滑动条类型
| 类型 | 写法 | 效果 |
|---|---|---|
| 单滑块 | <input type="range"> | 基础 |
| 双滑块 | data-role="rangeslider" | 范围选择 |
| 带数值 | data-show-value="true" | 显示当前值 |
| 步长 | step="5" | 跳跃选择 |
| 高亮轨道 | data-highlight="true" | 拖过部分高亮 |
| 小号 | data-mini="true" | 紧凑 |
3. 完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 滑动条</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>滑动条演示</h1>
</div>
<div data-role="main" class="ui-content">
<form>
<!-- 1. 基础滑动条 + 实时显示 -->
<div class="ui-field-contain">
<label for="volume">音量：<span id="vol-val">50</span>%</label>
<input type="range" name="volume" id="volume"
min="0" max="100" value="50"
data-show-value="true">
</div>
<!-- 2. 带高亮轨道 + 步长 -->
<div class="ui-field-contain">
<label for="brightness">屏幕亮度：<span id="bri-val">75</span>%</label>
<input type="range" name="brightness" id="brightness"
min="0" max="100" value="75" step="5"
data-highlight="true" data-show-value="true">
</div>
<!-- 3. 小号滑动条 -->
<div class="ui-field-contain">
<label for="rating">评分：<span id="rate-val">3</span>/5</label>
<input type="range" name="rating" id="rating"
min="1" max="5" value="3"
data-mini="true" data-show-value="true">
</div>
<!-- 4. 双滑块（范围选择） -->
<fieldset data-role="rangeslider">
<legend>价格范围：</legend>
<label for="price-min">最低：</label>
<input type="range" name="price-min" id="price-min"
min="0" max="1000" value="200">
<label for="price-max">最高：</label>
<input type="range" name="price-max" id="price-max"
min="0" max="1000" value="800">
</fieldset>
<!-- 5. 垂直滑动条（CSS 旋转） -->
<div class="ui-field-contain" style="text-align:center;">
<label>垂直调节</label>
<div style="display:inline-block; transform:rotate(-90deg); width:200px; margin:50px 0;">
<input type="range" name="vertical" id="vertical"
min="0" max="100" value="60"
data-show-value="true">
</div>
</div>
<!-- 6. 提交按钮 -->
<button type="submit" class="ui-btn ui-btn-b ui-corner-all ui-shadow">
保存设置
</button>
</form>
<!-- 7. 当前用户信息 -->
<div style="margin-top:30px; padding:15px; background:#f0f8ff; border-radius:8px;">
<h4>实时信息</h4>
<p><strong>时间：</strong>2025年11月17日 03:14（CET）</p>
<p><strong>国家：</strong>比利时 (BE)</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
<!-- 实时更新数值 -->
<script>
$(document).on("pagecreate", function() {
// 音量
$("#volume").on("change", function() {
$("#vol-val").text($(this).val());
});
// 亮度
$("#brightness").on("change", function() {
$("#bri-val").text($(this).val());
});
// 评分
$("#rating").on("change", function() {
$("#rate-val").text($(this).val());
});
// 双滑块联动显示
$("#price-min, #price-max").on("change", function() {
var min = $("#price-min").val();
var max = $("#price-max").val();
$(this).parent().find("legend").text("价格范围：€" + min + " - €" + max);
}).trigger("change");
});
</script>
</body>
</html>4. 滑动条属性汇总
| 属性 | 值 | 说明 |
|---|---|---|
type="range" | — | 必须 |
min / max | 数字 | 范围 |
value | 数字 | 默认值 |
step | 数字 | 步长 |
data-show-value="true" | — | 显示数值 |
data-highlight="true" | — | 高亮轨道 |
data-mini="true" | — | 小号 |
data-role="rangeslider" | — | 双滑块容器 |
5. JavaScript 控制
<script>
$(document).on("pagecreate", function() {
// 获取值
var vol = $("#volume").val();
// 设置值
$("#volume").val(80).slider("refresh");
// 监听事件
$("#volume").on("slidestart", function() { console.log("开始拖动"); });
$("#volume").on("slidestop", function() { console.log("结束拖动"); });
$("#volume").on("change", function() { console.log("值改变：" + $(this).val()); });
// 刷新（动态修改后）
$("#volume").slider("refresh");
});
</script>6. 最佳实践
| 建议 | 说明 |
|---|---|
始终加 data-show-value="true" | 用户知道当前值 |
步长 step 设为 5 或 10 | 避免太密 |
双滑块用 rangeslider | 专业范围选择 |
| 实时显示值 | 用 JS 更新 <span> |
| 避免垂直滑动条 | 除非特殊需求 |
7. 常见问题
| 问题 | 解决方案 |
|---|---|
| 数值不显示 | 必须 data-show-value="true" |
| 拖动不灵敏 | 确保 step 合理 |
| 双滑块不联动 | 自动处理，勿手动改 |
| 动态修改无效 | 调用 .slider("refresh") |
8. 推荐模板
<!-- 标准滑动条 -->
<label>音量：<span id="val">50</span>%</label>
<input type="range" id="vol" min="0" max="100" value="50" data-show-value="true">
<!-- 双滑块 -->
<fieldset data-role="rangeslider">
<label for="min">最低</label>
<input type="range" id="min" min="0" max="100" value="20">
<label for="max">最高</label>
<input type="range" id="max" min="0" max="100" value="80">
</fieldset>总结：滑动条类型选择
| 场景 | 推荐写法 |
|---|---|
| 音量/亮度 | 单滑块 + data-show-value |
| 价格范围 | rangeslider |
| 评分 1-5 | min="1" max="5" + data-mini |
| 进度调节 | data-highlight="true" |
需要我为你生成：
- 带颜色的滑动条（CSS 自定义轨道）？
- 多级滑动条（音量分贝）？
- 保存滑动条状态到 localStorage？
随时告诉我！
