# Slider Widget
Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets")
## version added: 1.5
**Description:** 拖动手柄以选择一个数值。
## QuickNav[Examples](#entry-examples)
### Options
+ [animate](#option-animate)
+ [disabled](#option-disabled)
+ [max](#option-max)
+ [min](#option-min)
+ [orientation](#option-orientation)
+ [range](#option-range)
+ [step](#option-step)
+ [value](#option-value)
+ [values](#option-values)
### Methods
+ [destroy](#method-destroy)
+ [disable](#method-disable)
+ [enable](#method-enable)
+ [option](#method-option)
+ [value](#method-value)
+ [values](#method-values)
+ [widget](#method-widget)
### Events
+ [change](#event-change)
+ [create](#event-create)
+ [slide](#event-slide)
+ [start](#event-start)
+ [stop](#event-stop)
jQuery UI Slider 插件使所选择的元素成为一个滑块(slider). 可以多种选项,例如多个操作手柄和操作范围。 手柄可以被鼠标拖动或者随着方向键移动。
slider小工具将在初始化的时候根据 `ui-slider-handle`样式名创建手柄元素。您可以在初始化前通过创建和追加的方式，或者在元素上添加`ui-slider-handle` 样式来自定义手柄元素。 这只会创建需要匹配[`value`](#option-value)/[`values`](#option-values)的手柄数值个数。例如，如果您指定的`值: [ 1, 5, 18 ]`，并创建一个自定义手柄，该插件将创建另外两个。
### 主题(Theming)
slider小工具使用[jQuery UI CSS framework](/theming/css-framework/)样式的外观和感觉。如果滑块具体样式是必须的，你可以用下面的CSS类名：
* `ui-slider`: 滑块控件的轨道。该元素将追加一个`ui-slider-horizontal` 或 `ui-slider-vertical`样式名，这取决于slider小工具是横向还是纵向的。另外具有UI的滑块水平或UI滑块垂直取决于[`orientation`](#option-orientation)参数，表示滑块的取向的类名。
* `ui-slider-handle`: 滑块手柄.
* `ui-slider-range`: 当设置 选项时使用的已选范围。如果 [`range`](#option-range) 选项设置为 `"min"` 或者 `"max"`，则该元素会分别另外带有一个 `ui-slider-range-min` 或 `ui-slider-range-max` 类。
### 依赖
* [UI 核心（UI Core）](/category/ui-core/)
* [部件库（Widget Factory）](/jQuery.widget/)
* [鼠标交互（Mouse Interaction）](/mouse/)
### 其他注意事项:
* 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
## 选项
### animate**类型:** [Boolean](http://api.jquery.com/Types/#Boolean) or [String](http://api.jquery.com/Types/#String) or [Number](http://api.jquery.com/Types/#Number)
**默认值:** `false`当用户单击滑块轨道时是否平稳地滑动手柄。 也可以接受任何有效的[动画持续时间](//api.jquery.com/animate/#duration)。**多种类型支持：**
* **Boolean**: 当设置为 `true`时, 滑动手柄将以默认的持续时间执行动画。
* **String**: 速度的名称, 比如 `"fast"` 或 `"slow"`。
* **Number**: 动画持续时间, 以毫秒为单位。
**代码示例:**
使用指定`animate`选项初始化滑块：
```
$( ".selector" ).slider({ animate: "fast" });
```
初始化后，获取或者设置`animate`选项:
```
// getter
var animate = $( ".selector" ).slider( "option", "animate" );
// setter
$( ".selector" ).slider( "option", "animate", "fast" );
```
### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为`true`，则禁用滑块。**Code examples:**
使用`disabled`选项初始化滑块组件：
```
$( ".selector" ).slider({ disabled: true });
```
在组件初始化之后，读取或设置 `disabled` 选项：
```
// getter
var disabled = $( ".selector" ).slider( "option", "disabled" );
// setter
$( ".selector" ).slider( "option", "disabled", true );
```
### max**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `100`滑块的最大值。**Code examples:**
使用`max`选项初始化滑块组件：
```
$( ".selector" ).slider({ max: 50 });
```
在组件初始化之后，读取或设置 `max` 选项：
```
// getter
var max = $( ".selector" ).slider( "option", "max" );
// setter
$( ".selector" ).slider( "option", "max", 50 );
```
### min**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `0`滑块的最小值**Code examples:**
使用`min`选项初始化滑块组件：
```
$( ".selector" ).slider({ min: 10 });
```
在组件初始化之后，读取或设置 `min` 选项：
```
// getter
var min = $( ".selector" ).slider( "option", "min" );
// setter
$( ".selector" ).slider( "option", "min", 10 );
```
### orientation**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"horizontal"`确定滑块手柄 将 水平（最小在左，最大在右）或垂直（最小在底部，最大在顶部）移动。（愚人码头注：就是滑块的方向，横向或纵向）可能的值：`"horizontal"`（横向）, `"vertical"`（纵向）。**Code examples:**
使用`orientation`选项初始化滑块组件：
```
$( ".selector" ).slider({ orientation: "vertical" });
```
在组件初始化之后，读取或设置 `orientation` 选项：
```
// getter
var orientation = $( ".selector" ).slider( "option", "orientation" );
// setter
$( ".selector" ).slider( "option", "orientation", "vertical" );
```
### range**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [String](http://api.jquery.com/Types/#String)
**Default:** `false`滑块是否表现为一个范围。**多种类型支持：**
* **Boolean**: 如果设置为`true`,如果你有两个手柄，slider将会感应到他们之间各种可能的范围要素。
* **String**: 或者他们是`"min"` 或者 `"max"`值。最小的范围将从slider的最小值传递给操作柄。最大的范围将从slider的最大值传递给操作柄
**Code examples:**
使用`range`选项初始化滑块组件：
```
$( ".selector" ).slider({ range: true });
```
在组件初始化之后，读取或设置 `range` 选项：
```
// getter
var range = $( ".selector" ).slider( "option", "range" );
// setter
$( ".selector" ).slider( "option", "range", true );
```
### step**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `1`定义slider从最小值移动到最大值的单位步长。在这个指定范围(最小值到最大值)内的值需要能被范围整除。**Code examples:**
使用`step`选项初始化滑块组件：
```
$( ".selector" ).slider({ step: 5 });
```
在组件初始化之后，读取或设置 `step` 选项：
```
// getter
var step = $( ".selector" ).slider( "option", "step" );
// setter
$( ".selector" ).slider( "option", "step", 5 );
```
### value**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `0`如果只有一个手柄则是指定slider的value值。 如果有多余一个的操作柄, 则是定义第一个操作柄的value值。**Code examples:**
使用`value`选项初始化滑块组件：
```
$( ".selector" ).slider({ value: 10 });
```
在组件初始化之后，读取或设置 `value` 选项：
```
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
```
### values**Type:** [Array](http://api.jquery.com/Types/#Array)
**Default:** `null`这个选项可以用来为多个操作柄设定value值. 如果 [`range`](#option-range) 设置为 `true`, 'values' 的长度最少应为 2。**Code examples:**
使用`values`选项初始化滑块组件：
```
$( ".selector" ).slider({ values: [ 10, 25 ] });
```
在组件初始化之后，读取或设置 `values` 选项：
```
// getter
var values = $( ".selector" ).slider( "option", "values" );
// setter
$( ".selector" ).slider( "option", "values", [ 10, 25 ] );
```
## Methods
### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
完全销毁滑块组件的功能，这将使元素返回它的初始状态。
* 这个方法不接收任何参数
**Code examples:**
调用destroy 方法：
```
$( ".selector" ).slider( "destroy" );
```
### disable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
禁用滑块组件。
* 这个方法不接收任何参数
**Code examples:**
调用disable 方法：
```
$( ".selector" ).slider( "disable" );
```
### enable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
启用滑块组件。
* 这个方法不接收任何参数
**Code examples:**
调用enable 方法：
```
$( ".selector" ).slider( "enable" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
获取与`optionName`对应的选项值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要获取的值所对应的选项的名称。
**Code examples:**
调用这个方法：
```
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
获取一个包含有描述当前滑块组件选项哈希值的键/值对。
* 这个方法不接收任何参数
**Code examples:**
调用这个方法：
```
var options = $( ".selector" ).slider( "option" );
```
### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置滑块组件`optionName`参数指定的选项的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要设置的选项的名称。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要为选项设置的参数值。
**Code examples:**
调用这个方法：
```
$( ".selector" ).slider( "option", "disabled", true );
```
### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置一个或多个滑块组件的选项值。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)要设置的选项名与值之间的映射关系。
**Code examples:**
调用这个方法：
```
$( ".selector" ).slider( "option", { disabled: true } );
```
### value()Returns: [Number](http://api.jquery.com/Types/#Number)
获取滑块组件的值。
* 这个方法不接收任何参数
**Code examples:**
调用这个方法：
```
var selection = $( ".selector" ).slider( "value" );
```
### value( value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置滑块组件的值。
* **value**Type: [Number](http://api.jquery.com/Types/#Number)用来设置的值
**Code examples:**
调用这个方法：
```
$( ".selector" ).slider( "value", 55 );
```
### values()Returns: [Array](http://api.jquery.com/Types/#Array)
获取所有手柄的值.（愚人码头注：适用于多手柄的滑块）
* 这个方法不接收任何参数
**Code examples:**
调用这个方法：
```
var values = $( ".selector" ).slider( "values" );
```
### values( index )Returns: [Number](http://api.jquery.com/Types/#Number)
获取指定手柄的值。（愚人码头注：适用于多手柄的滑块）
* **index**Type: [Integer](http://api.jquery.com/Types/#Integer)从0开始计数的手柄索引值。
**Code examples:**
调用这个方法：
```
var value = $( ".selector" ).slider( "values", 0 );
```
### values( index, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置指定手柄的值。（愚人码头注：适用于多手柄的滑块）
* **index**Type: [Integer](http://api.jquery.com/Types/#Integer)从0开始计数的手柄索引值。
* **value**Type: [Number](http://api.jquery.com/Types/#Number)要设置的值
**Code examples:**
调用这个方法：
```
$( ".selector" ).slider( "values", 0, 55 );
```
### values( values )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置所有手柄的值。（愚人码头注：适用于多手柄的滑块）
* **values**Type: [Array](http://api.jquery.com/Types/#Array)要设置的值。
**Code examples:**
调用这个方法：
```
$( ".selector" ).slider( "values", [ 55, 105 ] );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一个滑块元素的`jQuery`对象。
* 这个方法不接收任何参数
**Code examples:**
调用widget 方法：
```
var widget = $( ".selector" ).slider( "widget" );
```
## Events
### change( event, ui )Type: `slidechange`
当用户滑动一个手柄后，如果滑块的值改变了，就会触发这个事件；或者通过[`value`](#method-value)方法改变手柄值。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **handle**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象，表示被改变的手柄
* **value**Type: [Number](http://api.jquery.com/Types/#Number)当前滑块的值。
**Code examples:**
使用change 回调函数指定事件:
```
$( ".selector" ).slider({
change: function( event, ui ) {}
});
```
绑定事件侦听器到slidechange事件：
```
$( ".selector" ).on( "slidechange", function( event, ui ) {} );
```
### create( event, ui )Type: `slidecreate`
当滑块组件被创建时触发。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意: `ui`对象是空的，但是为了与其它元素保持一直，它总是被包含。_
**Code examples:**
使用create 回调函数指定事件:
```
$( ".selector" ).slider({
create: function( event, ui ) {}
});
```
绑定一个事件监听器到 slidecreate 事件:
```
$( ".selector" ).on( "slidecreate", function( event, ui ) {} );
```
### slide( event, ui )Type: `slide`
这个事件鼠标滑动滑块时触发。`ui.value`作为提供给事件的价值，表示将作为该当前移动手柄的结果值。 取消该事件会阻止手柄移动和手柄将继续其先前的值。取消该事件会阻止手柄移动并且手柄将继续其先前的值。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **handle**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象，表示当前移动的手柄
* **value**Type: [Number](http://api.jquery.com/Types/#Number)如果事件没有被取消，该手柄将移动到值 。
* **values**Type: [Array](http://api.jquery.com/Types/#Array)一个 多手柄滑块 当前值的数组。
**Code examples:**
使用slide 回调函数指定事件:
```
$( ".selector" ).slider({
slide: function( event, ui ) {}
});
```
绑定一个事件监听器到 slide 事件:
```
$( ".selector" ).on( "slide", function( event, ui ) {} );
```
### start( event, ui )Type: `slidestart`
当用户开始滑动滑块时触发。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **handle**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象，表示当前移动的手柄
* **value**Type: [Number](http://api.jquery.com/Types/#Number)滑块的当前值
**Code examples:**
使用start 回调函数指定事件:
```
$( ".selector" ).slider({
start: function( event, ui ) {}
});
```
绑定一个事件监听器到 slidestart 事件:
```
$( ".selector" ).on( "slidestart", function( event, ui ) {} );
```
### stop( event, ui )Type: `slidestop`
当用户滑动滑块后触发。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **handle**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象，表示移动后手柄。
* **value**Type: [Number](http://api.jquery.com/Types/#Number)滑块的当前值
**Code examples:**
使用stop 回调函数指定事件:
```
$( ".selector" ).slider({
stop: function( event, ui ) {}
});
```
绑定一个事件监听器到 slidestop 事件:
```
$( ".selector" ).on( "slidestop", function( event, ui ) {} );
```
## Example:
#### 一个简单的 jQuery UI 滑块（Slider）。
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>#slider { margin: 10px; } </style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="slider"></div>
<script>
$( "#slider" ).slider();
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架（CSS Framework）
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget