Slider 滑块

通过拖动滑块在一个固定区间内进行选择

基础用法

在拖动滑块时,显示当前值

默认


自定义初始值


隐藏 Tooltip


格式化 Tooltip


禁用

显示代码

离散值

选项可以是离散的

不显示间断点


显示间断点

显示代码

带有输入框

通过输入框设置精确数值

显示代码

范围选择

支持选择某一数值范围

显示代码

竖向模式

显示代码

展示标记

显示代码

参数

你可以通过修改$.fn.slider.defaults来修改全局默认配置,也可以在初始化时传入指定配置$(el).slider({xx: xx})

参数 说明 类型 可选值 默认值
value 绑定值 number / array - 0
min 最小值 number - 0
max 最大值 number - 100
disabled 是否禁用 boolean - false
step 步长 number - 1
showInput 是否显示输入框,仅在非范围选择时有效 boolean - false
showInputControls 在显示输入框的情况下,是否显示输入框的控制按钮 boolean - true
inputSize 输入框的尺寸 string large / medium / small / mini 'small'
showStops 是否显示间断点 boolean - false
showTooltip 是否显示 tooltip boolean - true
formatTooltip 格式化 tooltip message function(value) - -
range 是否为范围选择 boolean - false
vertical 是否竖向模式 boolean - false
height Slider 高度 string - 200px
label 屏幕阅读器标签 string - -
debounce 输入时的去抖延迟,毫秒,仅在showInput等于true时有效 number - 300
tooltipClass tooltip 的自定义类名 string - -
marks 标记, key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标记可以单独设置样式 object - -
change 值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发),回调参数为改变后的值 function(value) - -

方法

你可以通过调用$(el).slider('xxx')来调用滑块方法。

方法 说明 举例
disable 禁用滑块 $(el).slider('disable')
enable 取消禁用状态 $(el).slider('enable')
set 设置滑块值 $(el).slider('set', 50 / [20, 50])
get 获取滑块值 $(el).slider('get')