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

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();

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

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

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

<code><!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>
    <p class="range-input">
        <input type="range" class="range" min="1000" max="10000" step="1000" value="2000">
        <span class="range-val">2000</span>
    </p>
</body>
 
</html></code>

PHPz2898 天前522

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

全部回复(2)我来回复