1
0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00
layui/docs/slider/detail/options.md
yxb94616 2a1bb0e985
feat(silder): 新增提示文本始终显示控制属性 ()
* feat(silder): 新增提示文本始终显示控制属性

* fix(silder): 修改提示文本相关方法的变量命名,增加部分方法的 jsdoc
2024-01-03 17:25:48 +08:00

3.4 KiB
Raw Blame History

属性名 描述 类型 默认值
elem

绑定元素选择器或 DOM 对象

string/DOM -
type

滑块类型,可选值有:

  • default 水平滑块(默认)
  • vertical垂直滑块
string

default

value

滑块初始值。

  • 默认可直接设置数值,如: value: 50
  • 若滑块开启 range: true 区间选择,则值为数组,异表示开始和结尾的区间,如: value: [30, 60]
number
array
-
range

是否开启滑块的区间选择。若开启,则滑块将出现两个可拖拽的点。

boolean

false

min

滑块的最小值

number

0

max

滑块的最大值

number

100

step

滑块单次拖动的步长

number

1

showstep

是否显示间断点

boolean

false

tips

鼠标移入当前圆点,是否显示当前值

boolean

true

tipsAlways 2.9.3+

是否始终显示提示文本要开启此功能tips 必须设置为 true 才能生效

boolean

false

input

是否显示滑块的数字输入框。 注:若设置 range: true 则该属性强制无效。

boolean

false

height

滑动条高度。 必须设置 type: 'vertical' 属性,即垂直滑块时有效。

number

200

theme

滑块的主题色。

string -
disabled

是否禁用滑块

boolean

false

setTips

滑块拖拽时设置提示文本的回调函数。并返回当前的 value 参数。用法详见:#设置提示文本

change

滑块数值发生改变的回调函数。并返回当前的 value 参数。

slider.render({
  elem: '#id',
  change: function(value){
    console.log(value) // 滑块当前值
    // do something
  }
});

一般可在该回调中将 value 同步给表单隐藏域,或者进行一些其它操作。

done 2.8+

滑块拖拽完毕的回调函数。并返回当前的 value 参数。滑块拖动过程中不会触发。

slider.render({
  elem: '#id',
  done: function(value){
    console.log(value) // 滑块当前值
    // do something
  }
});

若需将 value 异步发送给后端,一般采用 done 回调,而非 change 回调。