Slider（滑动条）

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

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

依赖关系

• draggable

使用案例

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

<input value="12" data-toggle="topjui-slider" data-options="width:300,showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]">

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

<div data-toggle="topjui-slider" data-options="width:300,min:10,max:90,step:10"></div>

使用Javascript创建滑动条。

<div id="ss"></div>

$('#ss').iSlider({
    height:200,
    mode: 'v',
    tipFormatter: function(value){
        return value + '%';
    }
});

属性

属性名	属性值类型	描述	默认值
width	number	滑动条宽度。	auto
height	number	滑动条高度。	auto
mode	string	声明滚动条类型。可用值有：'h'(水平)、'v'(垂直)。	h
reversed	boolean	设置为true时，最小值和最大值将对调他们的位置。	FALSE
showTip	boolean	定义是否显示值信息提示。	FALSE
disabled	boolean	定义是否禁用滑动条。	FALSE
range	boolean	定义是否显示滑块范围。
value	number	默认值。	0
min	number	允许的最小值。	0
max	number	允许的最大值。	100
step	number	值增加或减少。	1
rule	array	显示标签旁边的滑块，'	' — 只显示一行。
tipFormatter	function	该函数用于格式化滑动条。返回的字符串值将显示提示。
converter	function	该转换器函数允许用户决定如何将一个值转换为进度条位置或进度条位置值。见下方代码示例。

属性代码示例

converter属性示例：

$('#ss').iSlider({
    converter:{
        toPosition:function(value, size){
            var opts = $(this).iSlider('options');
            return (value-opts.min)/(opts.max-opts.min)*size;
        },
        toValue:function(pos, size){
            var opts = $(this).iSlider('options');
            return opts.min + (opts.max-opts.min)*(pos/size);
        }
    }
});

事件

事件名	事件参数	描述
onChange	newValue, oldValue	在字段值更改的时候触发。
onSlideStart	value	在开始拖拽滑动条的时候触发。
onSlideEnd	value	在结束拖拽滑动条的时候触发。
onComplete	value	在滑块值被用户改变的时候触发，无论是拖动还是点击滑块。

方法

方法名	方法参数	描述
options	none	返回滑动条属性。
destroy	none	销毁滑动条对象。
resize	param	设置滑动条大小。'param'参数包含一下属性： width：新滑动条宽度。 height：新滑动条高度。
getValue	none	获取滑动条的值。
getValues	none	获取滑动条的值数组。
setValue	value	设置滑动条的值。
setValues	value	设置滑动条的值数组。
clear	none	清除滑动条的值。
reset	none	重置滑动条的值。
enable	none	启用滑动条控件。
disable	none	禁用滑动条控件。