Question

我想根据元素的值更改输入类型范围的拇指颜色。

存在一种简单的方法吗？

input range slider

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

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

Answer 1

你有两个选择，但我不知道这些是否足够好：

您可以使用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';

但提取适当的规则可能非常困难

Answer 2

您可以使用javascript将类添加到<message from='*' to='*' id='123' type='chat'> <nick xmlns='http://jabber.org/protocol/nick'>KASHIF</nick> <body>hello</body> </message>，因为您可以使用javascript直接修改此input[type="range"]的伪元素，只有类可以在您的情况下有用！

range

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

注意：我在此测试中使用$('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"); } });作为chrome。

如何更改输入类型范围的拇指颜色？

2 个答案: