1. 作为一个拖拽式的交互性组件, 滑块往往能给产品带来更好的操作体验。slider模块包含了你能想到的大部分功能, 尽管它可以作为一个独立的个体, 但很多时候它往往会出现form元素中。
2. 模块加载名称:slider。
3. 基础参数
3.1. slider组件支持以下参数:
4. 自定义提示文本方法 - setTips
4.1. 当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值, 你也可以自定义提示内容:
<script type="text/javascript">
layui.use(['slider'], function() {
var slider = layui.slider;
// 渲染
slider.render({
elem: '#test2' // 指向容器选择器
,setTips: function(value){ //自定义提示文本
return value + '%';
}
});
});
</script>
5. 数值改变的回调函数 - change
5.1. 在滑块数值被改变时触发。该回调非常重要, 可动态获得滑块当前的数值:
<script type="text/javascript">
layui.use(['slider'], function() {
var slider = layui.slider;
// 渲染
slider.render({
elem: '#test2' // 指向容器选择器
,change: function(value){
console.log(value[0]) //得到开始值
console.log(value[1]) //得到结尾值
}
});
});
</script>
6. 实例方法
6.1. 执行slider实例时, 会返回一个当前实例的对象, 里面包含针对当前实例的方法和属性。
6.2. 语法: var ins = slider.render(options);
var ins = slider.render(options); // 获得实例对象
ins.config // 获得当前实例的配置项
7. 动态改变滑块数值 - setValue
7.1. 你可以通过外部方法动态改变滑块数值:
<script type="text/javascript">
layui.use(['slider'], function() {
var slider = layui.slider;
// 渲染
var ins = slider.render({
elem: '#test1' // 指向容器选择器
});
// 改变指定滑块实例的数值
ins.setValue(20);
// 渲染
var ins1 = slider.render({
elem: '#test2' // 指向容器选择器
,range: true // 是否开启滑块的范围拖拽, 若设为true, 则滑块将出现两个可拖拽的环
});
// 若滑块开启了范围range: true
ins1.setValue(1, 0) // 设置开始值
ins1.setValue(6, 1) // 设置结尾值
});
</script>
8. 例子
8.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>滑块 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div style="margin-top: 60px;" id="test1"></div> <br />
<div id="test2"></div>
<script type="text/javascript">
layui.use(['slider'], function() {
var slider = layui.slider;
// 渲染
var ins = slider.render({
elem: '#test1' // 指向容器选择器
,type: 'vertical' // 滑块类型, 可选值有: default(水平滑块)、vertical(垂直滑块)
,input: true // 是否显示输入框
,height: 300 // 滑动条高度
,theme: '#000000' // 主题颜色
});
// 改变指定滑块实例的数值
ins.setValue(20);
// 渲染
var ins1 = slider.render({
elem: '#test2' // 指向容器选择器
,type: 'default' // 滑块类型, 可选值有: default(水平滑块)、vertical(垂直滑块)
,min: 0 // 滑动条最小值, 正整数, 默认为0
,max: 100 // 滑动条最大值
,range: true // 是否开启滑块的范围拖拽, 若设为true, 则滑块将出现两个可拖拽的环
,value: [30, 60] // 滑块初始值
,step: 10 // 拖动的步长
,showstep: true // 是否显示间断点
,tips: true // 是否显示文字提示
,setTips: function(value){ //自定义提示文本
return value + '%';
}
,change: function(value){
console.log(value[0]) //得到开始值
console.log(value[1]) //得到结尾值
}
});
// 若滑块开启了范围range: true
ins1.setValue(1, 0) // 设置开始值
ins1.setValue(6, 1) // 设置结尾值
});
</script>
</body>
</html>
8.2. 效果图