学习要点:
1.滑块模块
本节课我们来开始了解 Layui 的内置模块:滑块模块。
一.滑块模块
1. 滑块模块,即鼠标拖动一滚动条来获取数值,先来看下基本设置;
<div id="test"></div>
layui.use(['slider'], () => {
const slider = layui.slider
//实例化
slider.render({
//绑定 dom
elem : '#test',
})
})
2. 对于参数,下面列出比较常用的属性,更多参考手册:
属性 描述
elem 容器选择器,DOM 对象
type 类型,默认:default(水平)、vertical(垂直)
min 最小值,默认 0
max 最大值,默认 100
range 是否开启滑块范围拖拽
value 初始值
step 步长
showstep 是否显示间断点
tips 是否显示文字提示
input 是否显示输入框
disabled 是否禁用
theme 主题色
//实例化
slider.render({
//绑定 dom
elem : '#test',
range : false,
value : 20,
tips : false,
input : true,
})
3. 自定义 tips 的方法:setTips,以及回调 change 方法;
//自定义文本
setTips(value) {
return value + '%'
}
//回调
change(value) {
console.log(value)
}