I'm using a range slider for a video seek bar in my html5 video player and I would like to know if there is a way, without using jQuery or jQuery UI to style the input range bar so that the background to the LEFT of the thumb is one color, but the RIGHT is another color.

Imagine what you see on the YouTube video player, the unplayed portion of the video seek bar is that dark gray, but the portion that has been played is red. I want to recreate that, even if I have to use two empty divs and then control the width percentage with the slider through javascript...

But I'm hoping for a more stable built-in solution.

UPDATE

I have created a simple function that SHOULD update a css3 gradient in the background, but it doesn't seem to be updating. The alert I have in the function works exactly how it should, but for some reason the value I pass through the function is not setting the gradient stops along the way.

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

UPDATE

The script does work - but not if the value of the slider is under 50

I'm using a range slider for a video seek bar in my html5 video player and I would like to know if there is a way, without using jQuery or jQuery UI to style the input range bar so that the background to the LEFT of the thumb is one color, but the RIGHT is another color.

Imagine what you see on the YouTube video player, the unplayed portion of the video seek bar is that dark gray, but the portion that has been played is red. I want to recreate that, even if I have to use two empty divs and then control the width percentage with the slider through javascript...

But I'm hoping for a more stable built-in solution.

UPDATE

I have created a simple function that SHOULD update a css3 gradient in the background, but it doesn't seem to be updating. The alert I have in the function works exactly how it should, but for some reason the value I pass through the function is not setting the gradient stops along the way.

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

UPDATE

The script does work - but not if the value of the slider is under 50

• javascript
• css
• html

• I would ask if you could please keep all ments to the subject matter of the question, please. – Murphy1976 Commented Nov 26, 2014 at 16:15

2 Answers 2

I did a cross-browser solution (+ie9, ff, chrome, safari), only with pure 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;
    }
}

Your script is only working when v exceeds 50 is because you are using v as a left-bound limit for the gradient and c as a right-bound limit — when v falls below 50, the value of c will be more than 50 causing the limits to overlap. In other words, this causes the colour stops to overlap, with the second colour stop being further away than the third colour stop. The browser will therefore ignore the invalid colour stops.

In fact, you only need to access v and need not perform any calculations for c. See fixed fiddle here: http://jsfiddle/teddyrised/qsLeo3bc/ I also remend using event listeners instead of inline JS. For the HTML, simply remove the inline JS binding:

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

...and for the JS:

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