Javascript 设置HTML5范围栏的样式-拇指左侧|拇指右侧

我在我的html5视频播放器中为视频搜索栏使用范围滑块，我想知道是否有一种方法，不使用jQuery或jQuery UI来设置输入范围栏的样式，以便拇指左侧的背景是一种颜色，而右侧是另一种颜色

想象一下你在YouTube视频播放器上看到的，视频搜索栏的未播放部分是深灰色，但播放的部分是红色。我想重新创建它，即使我必须使用两个空div，然后通过javascript用滑块控制宽度百分比

但我希望有一个更稳定的内置解决方案

更新 我创建了一个简单的函数，可以在背景中更新css3渐变，但它似乎没有更新。我在函数中提供的警报正是它应该如何工作的，但由于某些原因，我通过函数传递的值没有设置沿途的渐变停止点

HTML:

更新

---

当

v

低于50时，脚本才起作用，因为您使用

v

作为渐变的左边界限制，而

c

作为右边界限制，所以脚本才起作用，

c

的值将超过50，导致限制重叠。换句话说，这会导致颜色停止重叠，第二个颜色停止比第三个颜色停止更远。因此，浏览器将忽略无效的颜色停止

实际上，您只需要访问

v

，而不需要对

c

执行任何计算。请参阅此处的fiddle：我还建议使用事件侦听器而不是内联JS。对于HTML，只需删除内联JS绑定：

<input id="seekslider" type="range" min="0" max="100" value="0" step="1">

---

我做了一个跨浏览器解决方案（+ie9，ff，chrome，safari），只使用纯css

---

我想问您是否可以保留对问题主题的所有评论。这在您只需单击seekbar时有效，但在播放视频时不会更新。您的问题中没有包含该细节。您询问的是样式，而不是将视频进度与输入滑块耦合，这给人的印象是您已经了解了该部分。我的第一句话：我在html5视频播放器中使用范围滑块作为视频搜索栏。。。我假设这意味着，因为这是一个视频播放器，所以进度将不断更新。请检查：只需将

元素替换为

元素即可。你对这个解决方案的想法是什么：当滑块宽度需要是一个百分比而不是一个整数时，它不起作用。它起作用，但你需要做一些变通。您必须在函数makelongshadow（）的“for”上加一个很高的数字。请给我们看一下%bit的替代值好吗@mwieczorek是的，我自己也尝试过，我真的很喜欢这个解决方案，但我需要拇指在悬停时展开。我实现了这一点，但是现在扩展的拇指被元素的边界切断了。添加左边距有帮助，但右边距会留下一些可见的轨迹。如何做到这一点？这里的代码：@Scyla101您正在缩放拇指和右边的线（灰线），所以您不可能实现，至少这样做是不可能的。

seekslider = document.getElementById("seekslider");

function updateStyle(v){
    c = 100 - v;
    seekslider.style.background = "-moz-linear-gradient(left,  #ed1e24 0%, #ed1e24 "+ v +"%, #191919 "+ c +"%, #191919 100%)";
    seekslider.style.background = "-webkit-gradient(linear, left top, right top, color-stop(0%,#ed1e24), color-stop("+ v +"%,#ed1e24), color-stop("+ c +"%,#191919), color-stop(100%,#191919))";
    seekslider.style.background = "-webkit-linear-gradient(left,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ c +"%,#191919 100%)";
    seekslider.style.background = "-o-linear-gradient(left,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ c +"%,#191919 100%)";
    seekslider.style.background = "-ms-linear-gradient(left,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ c +"%,#191919 100%)";
    seekslider.style.background = "linear-gradient(to right,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ c +"%,#191919 100%)";
    alert(v +" + "+c+" = "+(Number(v)+Number(c)));
}

<input id="seekslider" type="range" min="0" max="100" value="0" step="1">

var seekslider = document.getElementById("seekslider");

seekslider.addEventListener('input', function() {
    var v = this.value;

    seekslider.style.background = "-moz-linear-gradient(left,  #ed1e24 0%, #ed1e24 "+ v +"%, #191919 "+ v +"%, #191919 100%)";
    seekslider.style.background = "-webkit-gradient(linear, left top, right top, color-stop(0%,#ed1e24), color-stop("+ v +"%,#ed1e24), color-stop("+ v +"%,#191919), color-stop(100%,#191919))";
    seekslider.style.background = "-webkit-linear-gradient(left,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ v +"%,#191919 100%)";
    seekslider.style.background = "-o-linear-gradient(left,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ v +"%,#191919 100%)";
    seekslider.style.background = "-ms-linear-gradient(left,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ v +"%,#191919 100%)";
    seekslider.style.background = "linear-gradient(to right,  #ed1e24 0%,#ed1e24 "+ v +"%,#191919 "+ v +"%,#191919 100%)";
});

input[type='range'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    cursor: pointer;
    display: block;
    height: 100%;
    overflow: hidden;
    width: 45px;

    &:focus {
        box-shadow: none;
        outline: none;
    }

    &::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        background: #666;
        height: 3px;
    }

    &::-webkit-slider-thumb:before {
        position: absolute;
        top: 0;
        right: 50%;
        left: -200px;
        background: #e00;
        content: '';
        height: 3px;
    }


    &::-webkit-slider-thumb {
        width: 0;
        height: 0;
        -webkit-appearance: none;
        position: relative;
    }

    &::-moz-range-track {
        width: 45px;
    }

    &::-moz-range-thumb {
        width: 3px;
        height: 3px;

        -moz-appearance: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: 0;
        position: relative;
    }

    &::-moz-range-progress {
        background: #e00;
    }

    &::-ms-track {
        background: transparent;
        border: 0;
        border-color: transparent;
        border-radius: 0;
        border-width: 0;
        color: transparent;
        height: 3px;
        width: 45px;
    }

    &::-ms-fill-lower {
        background: #e00;
        border-radius: 0;
    }

    &::-ms-fill-upper {
        background: #666;
        border-radius: 0;
    }

    &::-ms-thumb {
        width: 0;
        height: 0;
        background: transparent;
    }

    &::-ms-tooltip {
        display: none;
    }
}