A Pen by Cassio Melo.

HTML5-Boost-Slider.markdown

HTML5 Boost Slider

HTML5 input range slider

A Pen by Cassio Melo on CodePen.

License.

index.html

<h1>
  HTML5 Boost Slider
  <span>
    move the handler to change its value
  </span>
</h1>

<div class="slider boost">

  <input type="range" min="0" max="50" step="1" value="35" />
  
</div>

script.js

function getGrandientColor(rangeValue){
  var startColor = [53, 242, 44]; // R,G,B
  var endColor = [255, 54, 54]; 
      
  var diffRed = endColor[0] - startColor[0];
  var diffGreen = endColor[1] - startColor[1];
  var diffBlue = endColor[2] - startColor[2];

  diffRed = (diffRed * rangeValue) + startColor[0];
  diffGreen = (diffGreen * rangeValue) + startColor[1];
  diffBlue = (diffBlue * rangeValue) + startColor[2];
  
  return [
    Math.round(diffRed), 
    Math.round(diffGreen),
    Math.round(diffBlue)
  ];
}


$(function() {
  
  $('.slider > input').on('change', 
    function(){
      
      var min = $( this ).attr("min");
      var max = $( this ).attr("max");
      var current = $( this ).val();
      
      var rangeValue = (current-min)/(max-min)
      
      var rgbArray = getGrandientColor(rangeValue);
      
      
      //$( this ).parent().css()
      
      $('<style name="changeable-style">.boost input[type="range"]::'+
        '-webkit-slider-thumb:after { '+
        'background: rgb(' + rgbArray.join(',') + ');'+
      '}</style>').appendTo('head');
      
      //alert('');
      
    });
    
}); // end dom ready

style.scss

@import "compass";
@import url('http://fonts.googleapis.com/css?family=Lato');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  position: relative;
  background: #eee;
}

h1 {
  margin: 0;
  padding: 20px 20px 30px;
  font: 400 30px Lato, sans-serif;
  color: #fff;
  background: #555;
}

h1 span {
  display: block;
  margin: 10px 0 0;
  font-size: 20px;
}

.slider {
  position: absolute;
  top: 180px;
  width: 200px;
  height: 24px;
  padding: 2px 2px 10px 2px;
  border-radius: 20px 20px 20px 20px;
  background: #888;
  /*transform: rotate(-90deg);*/
}

.boost {
  left: 50px;
}



input[type="range"] {
  width: 100%;
  height: 20px;
  border-radius: 20px 20px 20px 20px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  z-index: 3;
  width: 5px;
  height: 20px;
}

.boost input[type="range"]::-webkit-slider-thumb {
  background: #b00;
}


input[type="range"]::-webkit-slider-thumb:after {
  content: '';
  width: 500px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 1;
}

.boost input[type="range"]::-webkit-slider-thumb:after {
  background: #f55;
}

/*.boost:after {
  background: #f55;
}*/