zoukankan      html  css  js  c++  java
  • 【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 //禁用滑块
  • 相关阅读:
    php实现频率限制
    手机号打码
    qxx项目大文件上传
    502错误
    mac 安装phpunit
    文件权限问题
    无题
    php安装redis扩展全
    linux中whereis、which、find、location的区别和用法
    php安装redis扩展
  • 原文地址:https://www.cnblogs.com/mindzone/p/13407343.html
Copyright © 2011-2022 走看看