如何更改我的輸入類型範圍的拇指的顏色？

Question

我想要改變我的輸入類型範圍的拇指的顏色取決於該元素的值。

確實存在一個簡單的方法來做到這一點？

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

您可以添加類的input[type="range"]使用JavaScript，因爲你可以直接修改這個range用JavaScript的僞元素，只有類可以有用你的情況！

$('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"); 
    } 
}); 

演示：http://jsfiddle.net/r4rka4jL/1

注意：我在本次測試使用-webkit-鉻。

Answer 2

你有2個選擇，但我不知道是否有任何這是不夠好：

• 你可以定義input[type="range"]::-webkit-slider-thumb不同的CSS文件，並使用JS動態改變它：

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

• 可以動態使用http://www.w3.org/TR/DOM-Level-2-Style/Overview.html樣改變CSS規則：

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

  但它可能是十分困難的提取適當的規則