样式化HTML5范围栏 - 拇指左侧|拇指权利

Question

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

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

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

的 更新

我创建了一个简单的函数，应该在后台更新css3渐变，但它似乎没有更新。我在函数中的警报确实如何工作，但由于某种原因，我通过函数的值不是设置渐变停止。

HTML：

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

JS：

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

的 更新

脚本确实有效 - 但如果滑块的值低于50

则不行

Answer 1

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

http://codepen.io/nl_fonseca/pen/MwbovQ

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;
    }
}

Answer 2

您的脚本仅在v超过50时才有效，因为您使用v作为渐变的左边界限，c作为右边界限 - 当{ {1}}低于50，v的值将超过50，导致限制重叠。换句话说，这导致颜色停止重叠，第二颜色停止比第三颜色停止更远。因此，浏览器将忽略无效的色标。

事实上，您只需访问c，无需对v执行任何计算。请参阅此处的固定小提琴：http://jsfiddle.net/teddyrised/qsLeo3bc/我还建议使用事件侦听器而不是内联JS。对于HTML，只需删除内联JS绑定：

c

......对于JS：

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