How to change the color of the thumb of my input type range?

Question

I want to change the color of the thumb of my input type range depending on the value of that element.

Does exists a simple way to do that ?

body {
  background-color: #EDEDED;
}

.slider {
  position: relative;
  width: 300px;
  margin: 100px auto;
}

.slider svg {
  position: absolute;
  width: 24px;
}

.heart-broken {
  left: -34px;
  top: 0px;
}

.love {
  right: -34px;
  top: 0px;
}

.heart-broken path {
  fill: #FF0033;
}

.love path {
  fill: #83B348;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 2em;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: .375em;
  background-color: #222222;
  background: linear-gradient(#333333, #222222);
  outline: none;
  font: 1em trebuchet ms, verdana, arial, sans-serif;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent;
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

input[type="range"]::-moz-range-thumb {
  width: 2em;
  height: 1.2em;
  border-radius: .375em;
  border: none;
  background-image: linear-gradient(to bottom, #ADD978 0, #83B348 100%);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2em;
  height: 1.2em;
  border-radius: .375em;
  border: none;
  background-image: linear-gradient(to bottom, #ADD978 0, #83B348 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADD978), color-stop(100%, #83B348));
  background-image: -webkit-linear-gradient(top, #ADD978 0, #83B348 100%);
}

input[type="range"]::-ms-thumb {
  width: 2em;
  height: 1.2em;
  border-radius: .375em;
  border: 0;
  background-image: linear-gradient(to bottom, #ADD978 0, #83B348 100%);
}

<div class="slider">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" class="heart-broken">
<path fill="#000000" d="M32 11.192c0 2.699-1.163 5.126-3.015 6.808h0.015l-10 10c-1 1-2 2-3 2s-2-1-3-2l-9.985-10c-1.852-1.682-3.015-4.109-3.015-6.808 0-5.077 4.116-9.192 9.192-9.192 1.733 0 3.353 0.48 4.737 1.314l-2.929 4.686 7 4-4 10 11-12-7-4 2.465-3.698c0.748-0.196 1.533-0.302 2.342-0.302 5.077 0 9.192 4.116 9.192 9.192z"></path>
</svg>

  <input type='range' value='50' step='25' />
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" class="love">
<path fill="#000000" d="M32 11.192c0 2.699-1.163 5.126-3.015 6.808h0.015l-10 10c-1 1-2 2-3 2s-2-1-3-2l-9.985-10c-1.852-1.682-3.015-4.109-3.015-6.808 0-5.077 4.116-9.192 9.192-9.192 2.699 0 5.126 1.163 6.808 3.015 1.682-1.852 4.109-3.015 6.808-3.015 5.077 0 9.192 4.116 9.192 9.192z"></path>
</svg>

  
</div>

http://codepen.io/anon/pen/YXwaNV

Answer 1

You have 2 options, but I don't know if any of this is good enough:

• you can define different css files with input[type="range"]::-webkit-slider-thumb and change it dynamically using js:

  $('link[href="style1.css"]').attr('href','style2.css');

• you can change css rules dynamically using http://www.w3.org/TR/DOM-Level-2-Style/Overview.html like :

  document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

  but it could be quite hard to extract proper rule

Answer 2

You can add class to your input[type="range"] with javascript because you can modify directly the pseudo element of this range with javascript, only class can be usefull in your case!

$('input[type=range]').change(function() {
    var val = $(this).val();
    if ( val > 51 ) {
        $(this).removeClass("blue");
        $(this).addClass("red");
    } else if ( val <= 49) {
        $(this).removeClass("red");
        $(this).addClass("blue");
    } else if ( val == 50 ) {

        $('input[type=range]').removeAttr("class");
    }
});

Demo: http://jsfiddle.net/r4rka4jL/1

Note: I use -webkit- for chrome in this test.