如何设置HTML5范围输入的样式，使其在滑块前后具有不同的颜色？

Answers:

127

纯CSS解决方案：

  • Chrome：隐藏的溢出input[range]，并用阴影颜色填充拇指剩余的所有空间。
  • IE：无需重新发明轮子：::-ms-fill-lower
  • Firefox 无需重新发明轮子：::-moz-range-progress

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}
<input type="range"/>
展开摘要

— 死神908
source
1
嗨deathangel908，不错的解决方案。我只需要改善框阴影部分：box-shadow：-80px 0 0px 80px＃43e5f7;
— Filip Witkowski
34
chrome中的问题是，如果您希望拇指大于轨道，则框阴影将轨道与拇指的高度重叠。有没有办法将盒子阴影限制在轨道内？
— mharris7190
1
这对于基于百分比的宽度的输入不起作用。任何人都有解决方法吗？
— Remi Sture
2
可在此处找到有效的CSS / JS版本：jsfiddle.net/remisture/esyvws3d
— Remi Sture
3
@tenwest哇，太可怕了。感谢更新！
— CodeF0x
63

尽管从理论上讲，可接受的答案是好的，但它忽略了这样的事实，即拇指不能大于轨道的大小而不会被砍掉overflow: hidden。请参阅此示例，了解如何仅使用少量JS进行处理。

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};
#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}
<div class="chrome">
  <input id="myinput" min="0" max="60" type="range" value="30" />
</div>
展开摘要

— 达格3
source
你可以建议我，当我在HTML中添加最多= 5，然后颜色不正确填写
— Husna
@Husna我已将此答案扩展为还处理最小最大属性，希望对您有所帮助。
— htmn
1
@Husna您必须将％计算为最大值和最小值之间的差。例如，如果您的min：0和max：10，则应在JS中使用：+ this.value / (10-0)*100 +'%, #fff
— Rosario Russo
5
@Rosario Russo您只需使用(this.value-this.min)/(this.max-this.min)*100
— Silvan
@ dargue3，您应该使用silvans输入来更新答案
— Toskan
28

对的，这是可能的。尽管我不建议这样做，因为input range并不是所有浏览器都正确地支持它，因为HTML5中添加了一个新元素，而HTML5只是一个草稿（并且将持续很长时间），因此就样式而言可能不是最好的选择。

另外，您还需要一些JavaScript。为了简单起见，我为此选择了使用jQuery库。

在这里，您可以访问：http : //jsfiddle.net/JnrvG/1/。

— 联邦
source
8
那不是问题，css需要做些什么，只有css才有办法。
— Ipad 2014年
10
您可以使其在没有JS（jsfiddle.net/1xg1j3tw）的Chrome中运行。对于IE10 +，您可以使用-ms-fill-lower和-ms-fill-upper伪元素。
— Ales
1
@Ales您应该在一个额外的答案中输入。
— 卡·斯蒂布
4
更改.change(为， on('input', func..这样，当用户将拇指（不仅仅是鼠标）移动到拇指时，背景就会发生变化。
— 亚米·奥德梅尔
10

这是一个小更新：

如果使用以下命令，它将动态更新，而不是释放鼠标。

“更改mousemove”功能

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>
— 詹姆斯·帕克
source
9

以@ dargue3的答案为基础，如果您希望拇指比轨道大，则要充分利用该<input type="range" />元素并跨浏览器运行，则需要一些额外的JS和CSS行。

在Chrome / Mozilla浏览器可以使用linear-gradient的技术，但你需要调整基础上的比例min，max，value属性提到这里的@Attila O.。您需要确保未在Edge上应用此功能，否则不会显示拇指。@GeoffreyLalloué更详细地解释了这个位置。

值得一提的另一件事是，您需要rangeEl.style.height = "20px";在IE / Older上进行调整。简而言之，这是因为在这种情况下，“高度不应用于轨迹，而是包括拇指在内的整个输入”。小提琴

/**
 * Sniffs for Older Edge or IE,
 * more info here:
 * https://stackoverflow.com/q/31721250/3528132
 */
function isOlderEdgeOrIE() {
  return (
    window.navigator.userAgent.indexOf("MSIE ") > -1 ||
    !!navigator.userAgent.match(/Trident.*rv\:11\./) ||
    window.navigator.userAgent.indexOf("Edge") > -1
  );
}

function valueTotalRatio(value, min, max) {
  return ((value - min) / (max - min)).toFixed(2);
}

function getLinearGradientCSS(ratio, leftColor, rightColor) {
  return [
    '-webkit-gradient(',
    'linear, ',
    'left top, ',
    'right top, ',
    'color-stop(' + ratio + ', ' + leftColor + '), ',
    'color-stop(' + ratio + ', ' + rightColor + ')',
    ')'
  ].join('');
}

function updateRangeEl(rangeEl) {
  var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max);

  rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5');
}

function initRangeEl() {
  var rangeEl = document.querySelector('input[type=range]');
  var textEl = document.querySelector('input[type=text]');

  /**
   * IE/Older Edge FIX
   * On IE/Older Edge the height of the <input type="range" />
   * is the whole element as oposed to Chrome/Moz
   * where the height is applied to the track.
   *
   */
  if (isOlderEdgeOrIE()) {
    rangeEl.style.height = "20px";
    // IE 11/10 fires change instead of input
    // https://stackoverflow.com/a/50887531/3528132
    rangeEl.addEventListener("change", function(e) {
      textEl.value = e.target.value;
    });
    rangeEl.addEventListener("input", function(e) {
      textEl.value = e.target.value;
    });
  } else {
    updateRangeEl(rangeEl);
    rangeEl.addEventListener("input", function(e) {
      updateRangeEl(e.target);
      textEl.value = e.target.value;
    });
  }
}

initRangeEl();
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 300px;
  height: 5px;
  padding: 0;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}


/*Chrome thumb*/

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 5px;
  /*16x16px adjusted to be same as 14x14px on moz*/
  height: 16px;
  width: 16px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*Mozilla thumb*/

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -moz-border-radius: 5px;
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge input*/

input[type=range]::-ms-track {
  width: 300px;
  height: 6px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 2px 0;
  /*remove default tick marks*/
  color: transparent;
}


/*IE & Edge thumb*/

input[type=range]::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 5px;
  background: #e7e7e7;
  border: 1px solid #c5c5c5;
}


/*IE & Edge left side*/

input[type=range]::-ms-fill-lower {
  background: #919e4b;
  border-radius: 2px;
}


/*IE & Edge right side*/

input[type=range]::-ms-fill-upper {
  background: #c5c5c5;
  border-radius: 2px;
}


/*IE disable tooltip*/

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

input[type="text"] {
  border: none;
}
<input type="range" value="80" min="10" max="100" step="1" />
<input type="text" value="80" size="3" />
展开摘要

— htmn
source
5

先前接受的解决方案不再起作用。

最后，我编写了一个简单的函数，将该函数包装range到一个样式容器中，并在光标之前添加了所需的栏。我写了这个示例，在CSS中容易看到设置了“蓝色”和“橙色”这两种颜色，因此可以快速对其进行修改。

— 费德格
source
2

如果您使用第一个答案，则拇指有问题。在chrome中，如果您希望拇指大于轨道，则框阴影将轨道与拇指的高度重叠。

只需总结所有这些答案，然后使用较大的滑块即可编写正常工作的滑块：jsfiddle

const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value

slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)`

slider.oninput = function() {
  this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`
};
#myinput {
  border-radius: 8px;
  height: 4px;
  width: 150px;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {
  width: 6px;
  -webkit-appearance: none;
  height: 12px;
  background: black;
  border-radius: 2px;
}
<div class="chrome">
  <input id="myinput" type="range" min="0" value="25" max="200" />
</div>
展开摘要

— 阿卜迪加利语
source
这对我来说可以为控制按钮添加颜色。谢谢
— 弗兰克
0

WebKit，Firefox和IE中的伪元素现在都支持它。但是，当然每个都不同。：（

查看此问题的答案和/或搜索标题prettify <input type=range> #101为某些解决方案的CodePen 。

— 威尔逊
source
-5 
input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

上面的代码更改范围输入样式.....

— 克里希
source
适用于FireFox 57，但不适用于Opera 49和Safari 11-更糟糕的是，没有任何功能支持前景色。
— devon
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.