jQuery Mobile 表单滑动条
jQuery Mobile 表单滑动条
jQuery Mobile 表单滑动条（Slider widget）是通过手势来操作一个滑块，用于选择一个范围值的一组表单元素。
基本用法
要创建一个基本的滑动条，需要使用 <input> 标签并将其类型设置为 range。在这个标签中，需要使用一些自定义属性来配置滑动条的外观和行为。
<label for="slider-1">滑动条：</label>
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
min：滑块可选的最小值。max：滑块可选的最大值。value：滑块的默认初始值。
带刻度的滑动条
要创建带刻度的滑动条，需要引入 jQuery.mobile.extensions.js 文件，然后使用一个 <div> 标签来包裹 <input> 标签，并添加一些自定义属性来配置滑动条的外观和行为。
<label for="slider-2">带刻度滑动条：</label>
<div data-role="rangeslider" data-mini="true">
<label for="slider-2-min">最小值：</label>
<input type="range" name="slider-2-min" id="slider-2-min" min="0" max="100" value="0">
<label for="slider-2-max">最大值：</label>
<input type="range" name="slider-2-max" id="slider-2-max" min="0" max="100" value="100">
</div>
data-role="rangeslider"：表示这是一个带刻度的滑动条。data-mini="true"：表示这是一个小尺寸的滑动条，适用于移动设备页面。<label>：表示每个刻度的标签。<input type="range">：表示每个刻度的滑块。
滑动条事件
当用户拖动滑动条时，可以捕获它的 change 事件和 input 事件。这些事件可用于实现与滑动条有关的其它功能。
$(document).on("change", "#slider-1", function () {
var value = $(this).val();
console.log("滑动条的值为：" + value);
});
$(document).on("input", "#slider-1", function () {
var value = $(this).val();
console.log("滑动条的值为：" + value);
});
插件选项
jQuery Mobile 表单滑动条提供了一些插件选项，以控制滑动条的行为和外观。
theme：给滑动条添加主题，可以是任何 jQuery Mobile 主题。trackTheme：给滑动条的轨道添加主题，可以是任何 jQuery Mobile 主题。disabled：禁用滑动条，将其置为不可用状态。highlight：当滑块处于激活状态时，高亮轨道和轨道末端。mini：创建一个小尺寸的滑动条，适用于移动设备页面。popupEnabled：当用户拖动滑块时，显示当前的值弹出窗口。
<label for="slider-3">主题滑动条：</label>
<input type="range" name="slider-3" id="slider-3" min="0" max="100" value="50" data-theme="b" data-track-theme="a" data-highlight="true" data-popup-enabled="true">
总结
jQuery Mobile 表单滑动条是一个非常有用的工具，用于选择一组表单元素中的一个范围值。通过使用自定义属性和插件选项，可以轻松地配置滑动条的外观和行为。同时，还可以通过捕获滑动条的事件来增强其功能。