How to Fill Html5 Input[Type=Range] on the Left Side of the Thumb With CSS Only

/*Chrome*/@media screen and (-webkit-min-device-pixel-ratio:0) {    input[type='range'] {      overflow: hidden;      width: 80px;      -webkit-appearance: none;      background-color: #9a905d;    }        input[type='range']::-webkit-slider-runnable-track {      height: 10px;      -webkit-appearance: none;      color: #13bba4;      margin-top: -1px;    }        input[type='range']::-webkit-slider-thumb {      width: 10px;      -webkit-appearance: none;      height: 10px;      cursor: ew-resize;      background: #434343;      box-shadow: -80px 0 0 80px #43e5f7;    }
}/** FF*/input[type="range"]::-moz-range-progress {  background-color: #43e5f7; }input[type="range"]::-moz-range-track {    background-color: #9a905d;}/* IE*/input[type="range"]::-ms-fill-lower {  background-color: #43e5f7; }input[type="range"]::-ms-fill-upper {    background-color: #9a905d;}

<input type="range"/>

Styling the HTML5 Range Bar - Left of Thumb | Right of Thumb

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.net/teddyrised/qsLeo3bc/ I also recommend 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%)";
});

How to customize the HTML5 input range type looks using CSS?

EDIT: nowadays all major browser support both

• <progress>

• input[type='range']

Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.

The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)

I wouldn't try that for two reasons:

1. there might be huge compatibility issues now and for the next few (or many) years.
   Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding.
   It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).

2. The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!

To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
   <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;"> </p>
</div>

Then simply update the style.width of inner P element in percent like:

width: 75%

FYI: if you want to do that in simple JS here is the code:

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';

How to reverse the direction in HTML5 range input?

This might do the trick: setting the direction of the input to be right to left on the CSS

#reversedRange {
  direction: rtl
}

See sample code below:

PS the javascript/jquery code is only to illustrate the values changing and it's not needed. Only the CSS and the id attribute on the input element

Updated: based on comments by @MCTaylor17 (thanks)

$(function() {  $("#rangeValue").text($("#reversedRange").val());    $("#reversedRange").on('change input', function() {    $("#rangeValue").text($(this).val());  });});

#reversedRange {  direction: rtl}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Max<input type="range" min="0" max='5' value="0" step="1" id="reversedRange">Min<div>value: <span id="rangeValue"></span></div>