Coloured input range

css javascript way to obtaina coloured version of the input[type=range]

by Federico Ghedina

HTML

<input type="range" min=0 max=120 step=1 value=50>


<hr/>
<div style="width:300px">
  <input type="range" min=0 max=120 step=1 value=50 id="range2">
</div>

<hr>


<input type="range" min=0 max=120 step=1 value=50>

CSS

.barCnt {
  position: relative;
  height: 10px;
  padding: 5px 0px;
}

.barCnt .preBar {
  position: absolute;
  background-color: blue;
  height: 5px;
  line-height: 5px;
  z-index: 200;
  border-radius: 3px;
  padding: 0px;
  margin: 0px;
  pointer-events: none;
}

input[type=range].colorized {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  position: absolute;
  padding: 0px;
  margin: 0px;
  cursor: ew-resize;
  z-index: 100;
  left: 0px
}

input[type=range].colorized::-webkit-slider-runnable-track {
  height: 5px;
  background: orange;
  border: none;
  border-radius: 3px;
}

input[type=range].colorized::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: blue;
  margin-top: -4px;
  z-index: 400;
}

input[type=range].colorized:focus {
  outline: none;
}

input[type=range].colorized:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range].colorized::-moz-range-track {
  width: 100%;
  height: 5px;
  background: orange;
  border: none;
  border-radius: 3px;
}

input[type=range].colorized::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: blue;
  z-index: 400;
}

input[type=range].colorized::-moz-focus-outer {
  border: 0;
}

JavaScript

function rangeColor(input) {
  var wrp = document.createElement('div'),
    preBar = document.createElement('p'),
    min = parseInt(input.min, 10),
    max = parseInt(input.max, 10),
    range = max - min,
    getVal = function() {
      var w = parseInt(input.clientWidth, 10),
        t = ~~(w * (parseInt(input.value, 10) - min) / range);
      return t;
    };
  wrp.className = 'barCnt';
  preBar.className = 'preBar';

  input.className = input.className.length ? (input.className + ' colorized') : 'colorized';
  input.parentNode.replaceChild(wrp, input);

  wrp.appendChild(input);
  wrp.appendChild(preBar);



  input.addEventListener('input', function() {

    preBar.style.width = getVal() + 'px';
  });

  preBar.style.width = getVal() + 'px';
}


rangeColor(document.getElementById('range2'))