如何在滑动范围滑块时填充背景答案

【问题标题】：how to fill background on sliding the range slider如何在滑动范围滑块时填充背景
【发布时间】：2015-12-27 19:45:49
【问题描述】：

    function myValue(val) {
    document.getElementById('inputVal').innerHTML=val; 
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: red;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #e7ffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

<html>
<head>

</head>
<body>
<div>
<input type = "range" min = "10" max = "100" step = "1" onchange="myValue(this.value);" oninput="myValue(this.value)">
<div id = "inputVal"></div>
</div>
<body>
</html>

我正在使用 html 的简单输入范围。我可以修改轨道和拇指但我想在向前移动的拇指上填充轨道的颜色并在移动的背面移除颜色。我该怎么做？

【问题讨论】：

input type range css - background color的可能重复
对不起，我之前试图找到解决方案，但无法获得解决方案。我怎样才能让它与众不同或下一步该做什么？
一些 html 元素，例如选择标签和滑块，尽管您可以在它们上使用一些 css 技巧，但它们具有标准外观。我建议使用 Jquery 滑块小部件来快速实现或使用纯 JavaScript 从头开始创建滑块小部件，以适应您的设计和普通滑块所没有的规格（这可能具有挑战性）.. 使用 Jquery 选项

标签： javascript jquery html css

【解决方案1】：

您可以使用 JQuery Slider 来获得相同的结果。

CSS：

#red {
float: left;
clear: left;
width: 300px;
margin: 15px;
  }
#red .ui-slider-range { background: #ef2929; }

HTML：

<body >
   <div id="red"></div>
   <div id="va"></div>
 </body>

JS 查询：

function getval()
{
document.getElementById("va").innerHTML = $( "#red" ).slider( "option",     "value" );
 }

$(function() {
$( "#red").slider({
  orientation: "horizontal",
  range: "min",
  max: 100,
  value: 10,
  slide : getval 
});
});

JSFiddle：https://jsfiddle.net/6h49upte/

另请参阅 JQuery Slider API 及其易于实现的示例。查看受支持的 Jquery 版本。

【讨论】：

非常感谢您的建议。我使用了引导滑块和 jquery 滑块。但是使用他们复杂的javascript。我无法对它们实施动态最小值和最大值。我希望它能简单地工作。
@shoaib 请参阅 JQuery API 文档以了解滑块，它也将帮助您控制值。点赞并接受感谢

【解决方案2】：

据我所知，您只能在 Internet Explorer 中执行此操作：

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

&lt;input type="range" min="10" max="100" step="1"&gt;

【讨论】：

感谢您的建议。但它仅在 Internet Explorer 中有用。我使用 webkit 而不是 ms，但它在 IE 之外的任何地方都无法使用
对不起，除了 Internet Explorer 之外的任何其他浏览器都不可能，这就是你的答案，对不起?