<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 表单滑动条示例</title>
<!-- 引入 jQuery Mobile CSS 文件 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 文件 -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- 引入 jQuery Mobile 文件 -->
<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">
<h1>表单滑动条示例</h1>
</div>
<div data-role="content">
<!-- 单一滑动条 -->
<label for="slider-1">单一滑动条:</label>
<input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100">
<!-- 范围滑动条 -->
<label for="slider-2">范围滑动条:</label>
<input type="range" name="slider-2a" id="slider-2a" value="25" min="0" max="100">
<input type="range" name="slider-2b" id="slider-2b" value="75" min="0" max="100">
<!-- 提交按钮 -->
<button type="submit" data-theme="b">提交</button>
</div>
<div data-role="footer">
<h4>© 2023 jQuery Mobile 示例</h4>
</div>
</div>
</body>
</html>
在这个示例中，<input> 标签的 type 属性设置为 "range"，并且使用 min 和 max 属性定义了滑动条的范围。你可以根据需要调整这些值。这里包含了一个单一滑动条和一个范围滑动条（由两个 <input> 元素组成）。用户可以通过拖动滑动条来选择值。
确保引入了正确版本的 jQuery 和 jQuery Mobile，以确保样式和脚本的正确运行。这样，jQuery Mobile 将会为滑动条提供移动设备友好的样式和交互。
转载请注明出处：http://www.zyzy.cn/article/detail/9431/jQuery Mobile