Slider（滑动条）

使用$.fn.slider.defaults重写默认值对象。


滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。


依赖关系

•   draggable

使用案例

当使用一个表单字段时，使用< input>标签创建一个滑动条。

也允许使用< div/>创建滚动条，但是'value'属性是无效的。

使用Javascript创建滑动条。

            

        
            $('#ss').slider({
                mode: 'v',
                tipFormatter: function(value){
                    return value + '%';
                }
            });
属性
属性名 属性值类型 描述 默认值
width number 滑动条宽度。 auto
height number 滑动条高度。 auto
mode string 声明滚动条类型。可用值有：'h'(水平)、'v'(垂直)。 h
reversed boolean 设置为true时，最小值和最大值将对调他们的位置。（该属性自1.3.2版开始可用） FALSE
showTip boolean 定义是否显示值信息提示。 FALSE
disabled boolean 定义是否禁用滑动条。 FALSE
range boolean 定义是否显示滑块范围。（该属性自1.4.2版开始可用）

为true时：
为false时：
value number 默认值。 0
min number 允许的最小值。 0
max number 允许的最大值。 100
step number 值增加或减少。 1
rule array 显示标签旁边的滑块，'|' — 只显示一行。 []
tipFormatter function 该函数用于格式化滑动条。返回的字符串值将显示提示。
converter function 该转换器函数允许用户决定如何将一个值转换为进度条位置或进度条位置值。（该属性自1.3.6版开始可用）
代码示例：
                            $('#ss').slider({
                                converter:{
                                    toPosition:function(value, size){
                                    var opts = $(this).slider('options');
                                    return (value-opts.min)/(opts.max-opts.min)*size;
                                    },
                                    toValue:function(pos, size){
                                    var opts = $(this).slider('options');
                                    return opts.min + (opts.max-opts.min)*(pos/size);
                                    }
                                }
                            });
事件
事件名 事件参数 描述
onChange newValue, oldValue 在字段值更改的时候触发。
onSlideStart value 在开始拖拽滑动条的时候触发。
onSlideEnd value value 在结束拖拽滑动条的时候触发。
onComplete value value 在滑块值被用户改变的时候触发，无论是拖动还是点击滑块。（该事件自1.3.4版开始可用）
方法
方法名 方法参数 描述
options none 返回滑动条属性。
destroy none 销毁滑动条对象。
resize param 设置滑动条大小。'param'参数包含一下属性：
width：新滑动条宽度。
height：新滑动条高度。
getValue none 获取滑动条的值。
getValues none 获取滑动条的值数组。（该方法自1.4.2版开始可用）
setValue value 设置滑动条的值。
setValues value 设置滑动条的值数组。（该方法自1.4.2版开始可用）
clear none 清除滑动条的值。（该方法自1.3.5版开始可用）
reset none 重置滑动条的值。（该方法自1.3.5版开始可用）
enable none 启用滑动条控件。
disable none 禁用滑动条控件。