【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 //禁用滑块