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