【Web前端问题】Js如何获取<input type="range">的滑块::-webkit-slider-thumb的样式?

图片描述

如上图，我用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>

回答：

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(){}....

以上是 【Web前端问题】Js如何获取&lt;input type=&quot;range&quot;&gt;的滑块::-webkit-slider-thumb的样式? 的全部内容， 来源链接： utcz.com/a/139837.html

回到顶部