滑块(Slider)

拖动手柄来选择一个数值。

如需了解更多有关 slider 部件的细节,请查看 API 文档 滑块部件(Slider Widget)。

默认功能

基本的滑块是水平的,有一个单一的手柄,可以用鼠标或箭头键进行移动。

实例

    jQuery UI 滑块(Slider) - 默认功能      

运行实例 »

点击 "运行实例" 按钮查看在线实例

颜色选择器

组合了三个滑块,来创建一个简单的 RGB 颜色选择器。

实例

    jQuery UI 滑块(Slider) - 颜色选择器       

简单的颜色选择器


运行实例 »

点击 "运行实例" 按钮查看在线实例

多个滑块

组合水平的和垂直的滑块,每个都带有各自的选项,来创建一个音乐播放器的 UI。

实例

    jQuery UI 滑块(Slider) - 多个滑块       

主音量

图形均衡器

88 77 55 33 40 45 70

运行实例 »

点击 "运行实例" 按钮查看在线实例

范围滑块

设置range选项为 true,来获取带有两个拖拽手柄的值的范围。手柄之间的控件用不同的背景颜色填充来表示该区间的值是可选择的。

实例

    jQuery UI 滑块(Slider) - 范围滑块      


运行实例 »

点击 "运行实例" 按钮查看在线实例

带有固定最大值的范围

固定范围滑块的最大值,用户只能选择最小值。设置range选项为 "max"。

实例

    jQuery UI 滑块(Slider) - 带有固定最大值的范围      


运行实例 »

点击 "运行实例" 按钮查看在线实例

带有固定最小值的范围

固定范围滑块的最小值,用户只能选择最大值。设置range选项为 "min"。

实例

    jQuery UI 滑块(Slider) - 带有固定最小值的范围      


运行实例 »

点击 "运行实例" 按钮查看在线实例

绑定到 select 的滑块

如何绑定一个滑块到一个已有的 select 元素。选择保持可见以便显示变化。当选择改变时,同时更新滑块。

实例

    jQuery UI 滑块(Slider) - 绑定到 select 的滑块      

运行实例 »

点击 "运行实例" 按钮查看在线实例

滑块滚动条

使用滑块来操作页面上内容的定位。本实例中,它是一个能获取值的滚动条。

实例

    jQuery UI 滑块(Slider) - 滑块滚动条       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行实例 »

点击 "运行实例" 按钮查看在线实例

对齐增量

通过把step选项设置为一个整数来设置滑块值的增量,通常是滑块最大值的除数。默认增量是 1。

实例

    jQuery UI 滑块(Slider) - 对齐增量      


运行实例 »

点击 "运行实例" 按钮查看在线实例

垂直的范围滑块

改变范围滑块的方向为垂直的。通过.height()分配一个高度值,或通过 CSS 设置高度,同时设置orientation选项为 "vertical"。

实例

    jQuery UI 滑块(Slider) - 垂直的范围滑块      


运行实例 »

点击 "运行实例" 按钮查看在线实例

垂直的滑块

改变滑块的方向为垂直的。通过.height()分配一个高度值,或通过 CSS 设置高度,同时设置orientation选项为 "vertical"。

实例

    jQuery UI 滑块(Slider) - 垂直的滑块      


运行实例 »

点击 "运行实例" 按钮查看在线实例