24.滑块模块

学习要点：
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)
}