Js如何获取<input type="range">的滑块::-webkit-slider-thumb的样式?_Html5_论坛

Js如何获取<input type="range">的滑块::-webkit-slider-thumb的样式?

ze***91 分类：Html5 人气：1384 回帖：2 发布于6年前收藏

如上图，我用css重置了<input type="range">的样式,现在我想获取到滑块的left值，可以实现吗？
代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>demo</title>
    <style>
    .range-input {
        position: relative;
    }
    input[type=range] {
        -webkit-appearance: none;
        overflow: hidden;
        width: 100%;
        height: 40px;
        outline: 0;
        background: none;
    }
    
    input[type=range]:focus,
    input[type=range]:active {
        background: none;
    }
    /*滑块*/
    
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        position: relative;
        height: 30px;
        width: 30px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        -webkit-box-shadow: 0 2px 7px -5px rgba(0, 0, 0, 1);
        box-shadow: 0 2px 7px -5px rgba(0, 0, 0, 1);
    }
    
    input[type="range"]::-webkit-slider-thumb:before,
    input[type="range"]::-webkit-slider-thumb:after {
        position: absolute;
        top: 13px;
        width: 2000px;
        height: 5px;
        content: "";
        pointer-events: none;
        transition: .2s;
    }
    
    input[type="range"]::-webkit-slider-thumb:before {
        left: -2000px;
        background: #de1c16;
    }
    
    input[type="range"]::-webkit-slider-thumb:after {
        left: 30px;
        background: #d9d9d9;
    }
    .range-val {
    position: absolute;
    bottom: -15px;
    left: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    padding: 5px;
    background: #de1c16;
    color: #fff;
    }
    .range-val:before {
        content: '';
        position: absolute;
        top: -7px;
        left: 50%;
        margin-left: -7px;
        display: block;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #de1c16;
    }
    </style>
</head>

<body>
    <div class="range-input">
        <input type="range" class="range" min="1000" max="10000" step="1000" value="2000">
        <span class="range-val">2000</span>
    </div>
</body>

</html>

标签：css html5 javascript

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv5 码农

迷***雾软件测试工程师 6年前#1

建议楼上用
range.onmousemove = function(){}....

Lv6 码匠

郑***6 页面重构设计 6年前#2

var range = document.getElementById('range');
var span = document.getElementById('span');
var cs = getComputedStyle(range, 0);
range.onchange = function() {
    span.style.left = ((range.value - 1000) * parseInt(cs.width) / 9000
        + 18 - range.value/300) + "px";
    span.innerHTML = range.value;
};
range.onchange();

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取