jQuery Mobile Rangeslider 小部件默认选项

jQuery Mobile Rangeslider 是一个基于 jQuery Mobile 的小部件，它可以让用户通过移动滑块来选择一个范围的数值。本文将介绍 Rangeslider 的默认选项。

选项列表

| 选项 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | theme | 字符串 | 'a' | 设置小部件的主题，可以是 'a'、'b'、'c'、'd'、'e'。 | | trackTheme | 字符串 | 'a' | 设置滑动条的主题，可以是 'a'、'b'、'c'、'd'、'e'。 | | disabled | 布尔值 | false | 禁用小部件。 | | mini | 布尔值 | false | 将小部件设置为迷你模式。 | | highlight | 布尔值 | true | 将滑块和轨道颜色反转。 | | miniWidth | 数字或字符串 | 30 | 定义迷你模式下滑块的宽度。 | | popupEnabled | 布尔值 | false | 开启弹出提示。 | | popupTheme | 字符串 | 'a' | 设置弹出提示的主题，可以是 'a'、'b'、'c'、'd'、'e'。 | | popupArrow | 字符串 | 'b' | 设置弹出提示的箭头颜色，可以是 'a'、'b'、'c'、'd'、'e'。 | | popupWidth | 字符串 | null | 设置弹出提示的宽度，可以是像素值或百分比。 |

使用方法

<div data-role="rangeslider">
  <label for="range-1a">Rangeslider:</label>
  <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
  <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>

$(document).on("pagecreate", function() {
  $("div[data-role='rangeslider']").rangeslider();
});

示例

以下是一个简单的示例：

<div data-role="rangeslider">
  <label for="range-1a">Rangeslider:</label>
  <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
  <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>