How to Style HTML5's Range Control

Is there a way to style HTML5's range control?

Turns out, there is in webkit:

 input[type="range"]{
   -webkit-appearance:none !important;
 }

 input[type="range"]::-webkit-slider-thumb{
   -webkit-appearance:none !important;  
 }

You can then add whatever attributes you need to each those selectors. Background, gradient, etc...

Hope that helps!

styling html5's range control

You can't really do that. The spec doesn't define any formatting options. Live with the default look, or build your own using Javascript.

Styling HTML5's input range control with CSS?

you can do it in WebKit for sure. here's a quick example:
http://jsfiddle.net/jalbertbowdenii/7Nzgw/3/

pretty sure you can style cross-browser if you're using modernizr, @ least for modern browsers..but i am assuming.
you can find more information here:
http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range

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:

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).
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%';

Style lower and upper fill in HTML5 range input

First of all, read the article Styling Cross-Browser Compatible Range Inputs with CSS by Daniel Stern. His idea is to make the input invisible and then apply the custom styles.

He also developed an excellent online tool named randge.css in which you select the style preset and parameters and get auto generated CSS code like the following one:

input[type=range] {  -webkit-appearance: none;  margin: 10px 0;  width: 100%;}input[type=range]:focus {  outline: none;}input[type=range]::-webkit-slider-runnable-track {  width: 100%;  height: 12.8px;  cursor: pointer;  animate: 0.2s;  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;  background: #ac51b5;  border-radius: 25px;  border: 0px solid #000101;}input[type=range]::-webkit-slider-thumb {  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;  border: 0px solid #000000;  height: 20px;  width: 39px;  border-radius: 7px;  background: #65001c;  cursor: pointer;  -webkit-appearance: none;  margin-top: -3.6px;}input[type=range]:focus::-webkit-slider-runnable-track {  background: #ac51b5;}input[type=range]::-moz-range-track {  width: 100%;  height: 12.8px;  cursor: pointer;  animate: 0.2s;  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;  background: #ac51b5;  border-radius: 25px;  border: 0px solid #000101;}input[type=range]::-moz-range-thumb {  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;  border: 0px solid #000000;  height: 20px;  width: 39px;  border-radius: 7px;  background: #65001c;  cursor: pointer;}input[type=range]::-ms-track {  width: 100%;  height: 12.8px;  cursor: pointer;  animate: 0.2s;  background: transparent;  border-color: transparent;  border-width: 39px 0;  color: transparent;}input[type=range]::-ms-fill-lower {  background: #ac51b5;  border: 0px solid #000101;  border-radius: 50px;  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;}input[type=range]::-ms-fill-upper {  background: #ac51b5;  border: 0px solid #000101;  border-radius: 50px;  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;}input[type=range]::-ms-thumb {  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;  border: 0px solid #000000;  height: 20px;  width: 39px;  border-radius: 7px;  background: #65001c;  cursor: pointer;}input[type=range]:focus::-ms-fill-lower {  background: #ac51b5;}input[type=range]:focus::-ms-fill-upper {  background: #ac51b5;}
body {  padding: 30px;}

<input type="range">

How to style HTML5 range input to have different color before and after slider?

Pure CSS solution:

Chrome: Hide the overflow from input[range], and fill all the space left to
thumb with shadow color.
IE: no need to reinvent the wheel: ::-ms-fill-lower
Firefox no need to reinvent the wheel: ::-moz-range-progress

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

HTML5 input type range show range value

This uses javascript, not jquery directly. It might help get you started.

function updateTextInput(val) {          document.getElementById('textInput').value=val;         }

<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);"><input type="text" id="textInput" value="">