How to Customize the HTML5 Input Range Type Looks Using CSS

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

How to add custom styles to input type= range

Using document.querySelector(".input-range--custom"), you are selecting only the first input with the class input-range--custom.

So, the rest of the inputs do not have an event listener.

In order to select all of them, you need to use querySelectorAll instead of querySelector.

Replace your JS code with following:

var fillColor = "#9D3C3C",
  emptyColor = "#DDDDDD";

const rangeInputs = document.querySelectorAll(".input-range--custom")

rangeInputs.forEach(input => {
    input.addEventListener("input", function () {
      var percent = (100 * (this.value - this.min)) / (this.max - this.min) + "%";
      //  this.setAttribute('value', this.value);
      //  this.setAttribute('title', this.value);
      this.style.backgroundImage = `linear-gradient( to right, ${fillColor}, 
      ${fillColor} ${percent}, ${emptyColor} ${percent})`;
  });
})

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"/>

Is it possible to style input type=range with just a left and right color and no thumb?

Here is a working example.

function sliderValueChange(e) {
  console.log(e.value);
}

:root {
  --slider-width: 300px;
  --slider-height: 20px;
}

input[type='range'] {
  cursor: ew-resize;
  overflow: hidden;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    width: var(--slider-width);
    -webkit-appearance: none;
    background-color: #353535;
  }
  input[type='range']::-webkit-slider-runnable-track {
    height: var(--slider-height);
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }
  input[type='range']::-webkit-slider-thumb {
    width: 0px;
    -webkit-appearance: none;
    height: var(--slider-height);
    box-shadow: calc(-1 * var(--slider-width)) 0 0 var(--slider-width) #43e5f7;
  }
}

/* FF */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-thumb {
  height: var(--slider-height);
  width: 0;
  border: none;
  box-shadow: calc(-1 * var(--slider-width)) 0 0 var(--slider-width) #43e5f7;
  box-sizing: border-box;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #13bba4;
}

<input type="range" onchange="sliderValueChange(this)">

css3 - styling input range background

Apparently the line that range is on is called track, Css tricks has a detailed article on how to customize the range input.

Here is the link : https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

hope this helps.

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 change color, size and shape of elements in a range slider?

HTML Range Input has the following two pseudo-elements:

-webkit-slider-runnable-track
-webkit-slider-thumb

You can style them using the pseudo-selectors.
This CodePen has a clever solution in achieving what you intend. By using box-shadows on the thumb, you can style the area before and after the thumb.
Use multiple box-shadows + blurring to achieve gradient-like effects.

I edited your code a little to show how the above can be achieved. Rest is just about preferences on how you want the slider to look like. You can also use JavaScript to dynamically change property values depending on the input.

.container{
    display:flex;
    width:100%;
    padding-top:5;
    height: fit-content;
}

#volm{
    position: relative;
    margin-top: 5px;
    border-radius: 2px;
    width:153px;
    height: 5px;
    -webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  background-color: hsl(0deg, 0%, 90%);
  width: 100%;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
} 
input::-webkit-slider-thumb {
  position: relative;
  left: initial;
  bottom: 5px;
  -webkit-appearance: none;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff, 340px 0 0 320px #00f18f, inset 0 0 0 40px #1597ff;
  margin-top: 5px;
}

<div class = "container">
    <input type="range" 
    min="0" 
    max="25" 
    step="any" 
    value="%VOLM" 
    id="volm">
</div>

How to Customize the HTML5 Input Range Type Looks Using CSS