早睡早起,方能养生
Sleep early rise early, way to keep healthy

实现 input range 双滑块,范围选择

super
2022-08-22 18:55
views 3216

使用layui,快速实现功能

 

 

加粗效果,打开注释的css样式即可

 

 

代码下载:https://rongsp.com/download/layui_slider.zip

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>区间滑块</title>
    <meta name="author" content="super">
    <meta name="website" content="https://rongsp.com">

    <link rel="stylesheet" href="layui.css">
    <style type="text/css">
        #slide1 {
            margin-top: 100px;
            margin-left: 50px;
            width: 200px;
        }
        #slide2 {
            margin-top: 200px;
            margin-left: 50px;
            width: 200px;
        }

        /*如果想把轨道设置的宽一些,开启以下代码*/
        /*.layui-slider {
            background: rgb(220,227,237); // 设置滑块轨道未选中区域的颜色
        }
        .slideTest17 {
            height: 10px;
        }
        .layui-slider {
            height: 10px;
        }
        .layui-slider-wrap {
            top: -14px;
        }
        .layui-slider-wrap-btn {
            width: 24px;
            height: 24px;
        }*/

    </style>
</head>
<body>
    <div id="slide1"></div>
    <div id="slide2"></div>
    <script src="layui.js"></script>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        layui.use('slider', function(){
            var $ = layui.$
                ,slider = layui.slider;
            //默认滑块
            slider.render({
                elem: '#slide1'
                ,min: 0
                ,max: 23
                ,value: [8, 18]
                ,range: true
                ,theme: '#FF5722' //主题色
                ,change: function(value){
                    // alert(value);
                    // console.log(value) //动态获取滑块数值
                    //do something
                }
            });

            slider.render({
                elem: '#slide2'
                ,min: 1 // 最小值
                ,max: 7 // 最大值
                ,value: [1, 5] // 默认值,如果开启了range = true ,此处需要给一个数组[value1, value2]
                ,range: true // 是否开启范围选择
                ,theme: '#FF5722' // 主题色
                ,change: function(value) { // 滑块滑动时的回调,如果开启了range = true 值为[value1, value2]
                    // alert(value);
                    // console.log(value) //动态获取滑块数值
                    // do something
                }
            });
        });
    </script>
</body>
</html>

 

Layui 文档:

 

 



分享
1 条讨论
top