javascript - 如何更改我的输入类型范围的缩略图颜色？

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

您有 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';

  但提取正确的规则可能相当困难