jQuery UI 滑块

jQuery UI 滑块用于在特定范围内获取数值。 滑块优于文本输入的主要优点是用户不可能输入无效值。 他们可以使用滑块选择的每个值都是有效的。

语法

您可以使用两种形式的滑块 () 方法

第一种方法

slider (options) 方法指定应将 HTML 元素作为滑块进行管理。 此处 options 参数是一个对象，用于指定滑块的外观和行为。

您可以使用 JavaScript 对象一次使用一个或多个选项。 如果有多个选项，则必须使用逗号分隔它们，如下所示

以下是可以与此方法一起使用的不同选项的列表。

jQueryUI slider() 示例 1

让我们举一个简单的例子来演示滑块功能，无需将任何参数传递给 slider() 方法。

jQueryUI slider() 示例 2

value、animate 和 orientation 的用法

让我们举一个例子来演示 jQueryUI 的滑块函数中选项 value、animate 和 orientation 的用法。

jQueryUI slider() 示例 3

range、min、max 和 values 的用法

以下示例演示了 jQueryUI 的滑块函数中选项 range、min、max 和 values 的用法。

第二种方法

slider ("action", params) 方法指定对滑块的操作，例如将光标移动到新位置。 此操作在第一个参数中指定为字符串（例如，“value”表示光标的新值）。 查看可以传递的操作，如下表所示。

以下是可与此方法一起使用的不同操作的列表

jQueryUI slider() 示例 4

让我们举一个例子来演示上表中的操作。 在此示例中，我们使用 disable () 和 value () 方法。