【Layui】11 滑块 Slider
文档地址:
https://www.layui.com/demo/slider.html
基本滑块:
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>基本滑块</legend> </fieldset> <div id="slideTest1" class="demo-slider"></div> <script> layui.use(['slider','jquery','element'], function(){ let slider = layui.slider; let $ = layui.jquery; let element = layui.element; //默认滑块 slider.render({ elem: '#slideTest1' }); }); </script>
初始值设置:
在渲染函数中的属性只需要多一个value属性和值即可
value : 20
极值设置:
max & min 属性
max : 75
min : 10
步长设置:
step: 10
提示文本设置:
setTips: function(value){ //自定义提示文本
return value + 'GB';
}
使用固定提示:
tips: false, //关闭默认提示层
change: function(value){
$('#test-slider-tips1').html('当前数值:'+ value);
}
增加输入框支持:
input: true
垂直滑块设置:
type: 'vertical' //垂直滑块
滑块颜色设置:
theme: '#5FB878'
禁用设置:
disabled: true //禁用滑块