html5拖动滑块

攻城狮子骞技术 2022年11月9日

0 收藏 346 点赞 2,298 浏览 1029 个字

html5中input有增加type=range。这为拖动滑块提供了很大的便利。下面是他的属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{ position: relative;width: 500px;}
        #range {
            -webkit-appearance: none;
            background: #;
            height: 3px;
            outline: none;
            margin: ;
            width: 500px;
        }
        input[type=range]::-webkit-slider-thumb{
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: %;
            background: red;
        }
        p{
            position: absolute;
            width: 0px;
            height: 3px;
            background: green;
            top: -2px;
            left: ;
        }
        .range{
            position: relative;
        }
        .value{
            padding: 10px;
            background: #ffebc7;
            font-size: 40px;
            text-align: center;
            margin:  auto;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="value"></div>
    <div class="range">
        <input type="range" max="" min="" id="range" step="0.1" value="">
        <p></p>
    </div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(".value").html("")
    var rangeSwitch=function () {
        var x=$("#range").val();
        $("p").css({"width":(x/)**0.96})//乘的0.96是因为要不然绿色的颜色会有部分盖住滑动按钮（500-20）/500=0.96;
        $(".value").html(x)
    }
    $("#range").on("input",rangeSwitch)
</script>
</html>