原生JS实现拖拽条效果

效果图

HTML结构：

首先是我们的HTML结构，我们的拖拽条使用了<input />标签来实现，<input type="range" min="0" max="100" step="0.1"value="0" />10类型设置为range即可出现拖拽条样式。
HTML：

    <div id="box">
        <div class="item">
            <p><span>功能</span>-你觉得这个创意在功能上优秀吗？<em>分数越高表示 越优秀</em></p>
            <span>0</span>0<input type="range" min="0" max="100" step="0.1" value="0" />10
        </div>
        <div class="item">
            <p><span>外观</span>-你觉得这个创意在外观上优秀吗？<em>分数越高表示 越优秀</em></p>
            <span>0</span>0<input type="range" min="0" max="100" step="0.1"value="0" />10
        </div>
        <div class="item">
            <p><span>成本</span>-你觉得这个创意在成本上优秀吗？<em>分数越高表示 越优秀</em></p>
            <span>0</span>0<input type="range" min="0" max="100" step="0.1"value="0" />10
        </div>
        <div class="item">
            <p><span>难度</span>-你觉得这个创意在难度上优秀吗？<em>分数越高表示 越优秀</em></p>
            <span>0</span>0<input type="range" min="0" max="100" step="0.1"value="0" />10
        </div>
        <div class="item">
            <p><span>环保</span>-你觉得这个创意在环保上优秀吗？<em>分数越高表示 越优秀</em></p>
            <span>0</span>0<input type="range" min="0" max="100" step="0.1"value="0" />10
        </div>
    </div>

CSS样式：

我们可以单独对拖拽条的按钮和条进行样式的设置，其中background-size: 0 100%;是我们实现拖拽按钮左右颜色不同的关键。

        input[type="range"] {
            /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
            -webkit-appearance: none;
            outline: none;
            /*去除默认样式*/
            background-color: rgb(137,200,173);
            background: -webkit-linear-gradient(rgb(137,200,173), rgb(137,200,173)) no-repeat, #ddd;
            background-size: 0 100%;
            border-radius: 10px;
            /*border-radius: 15px;*/
            width: 300px !important;
            -webkit-appearance: none;
            height: 12px;
            padding: 0;
            border: none;
            margin-bottom: 10px;
            /*input的长度为80%，margin-left的长度为10%*/
            margin: 0 10px;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            /*去除默认样式*/
            cursor: default;
            top: 0;
            height: 30px;
            width: 10px;
            transform: translateY(0px);
            /*background: none repeat scroll 0 0 #5891f5;*/
            background: rgb(137,200,173);
            border-radius: 15px;
            /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
        }
        #box{
            width: 900px;
            margin: 0 auto;
            overflow: hidden;
            font-size: 14px;
        }
        .item{
            width: 400px;
            margin: 0 12px;
            height: 100px;
            float: left;
        }
        .item p{
            color: rgb(190, 188, 21);
        }
        .item p span{
            font-size: 20px;
        }
        .item p em{
            font-style: normal;
            color: rgb(145,197,69);
        }
        .item>span{
            display: inline-block;
            width: 40px;
            height: 30px;
            border: 1px solid black;
            margin-right: 10px;
            text-align: center;
            line-height: 30px;
        }

JS逻辑：

        var int_ele = document.querySelectorAll("input");
        var box_ele = document.getElementById("box");
        on(box_ele, "input", "input",function(e){
            var target = e.target;
            // 当前数值
            target.previousElementSibling.innerText = Math.floor(target.value * 100) / 1000;
            // 设置进度条颜色
            target.style.backgroundSize = target.value + "% 100%";
        });