Javascript 在输入范围的两个部分应用不同的颜色

我正在尝试为视频创建一个搜索栏，我想在搜索栏上显示黑色，表示已下载的视频量。如何在搜索栏上指定表示下载视频量的附加颜色

---

我想我没有正确地解释我的问题。我想要一种颜色（如银色），显示下载播放的视频量。搜索栏上的银色可以在默认的

html5视频

和

YouTube视频播放器

中找到。（下图）

var player=document.querySelector（“视频”），
seek_bar=document.querySelector（“输入”），
_控制台=document.querySelector（“div”）；
player.ontimeupdate=函数（）{
seek_bar.value=this.currentTime.toString（）.split（“.”[0]；
}
player.addEventListener（'progress'，function（）{
试一试{
_console.innerHTML=“下载到：”+this.buffered.end（0.toString（）.split（“.”）[0]；
}捕获（e）{}
});
视频{
宽度：90%；
身高：75%；
}
输入[type=“range”]{
宽度：90%；
高度：10px；
背景：rgb（110170250）；
边框：1px实心rgb（15,15,15）；
边界半径：50px；
-webkit外观：无！重要；
}
输入[type=“range”]：-webkit滑块拇指{
-webkit外观：无！重要；
背景：rgb（15,15,15）；
高度：20px；
宽度：20px；
光标：指针；
边界半径：100%；
}
为此，我将使用HTML元素

如果您希望显示下载视频量的仪表显示为黑色，您将如何设置它

progress
  -webkit-appearance: none /* Important, otherwise your styles won't have effect */

progress::-webkit-progress-value
  background: black


我想在搜索栏上显示黑色，表示搜索量
已下载的视频

下面是一个简单的示例，它通过轮询播放器的
buffered
属性将滑块的背景图像设置为线性渐变

请注意，
buffered
属性可以包含间隙。例如，当您将搜索栏从开始拖动到中间时，浏览器将不会下载中间的部分。您需要迭代
buffered
属性，构建孤岛列表，并相应地为搜索栏上色


var player=document.querySelector（“视频”）；
var seek_bar=document.querySelector（“输入[type='range']”）；
player.addEventListener（“loadedmetadata”，函数（）{
seek_bar.max=数学地板（此持续时间）；
});
player.addEventListener（“时间更新”，函数（）{
seek_bar.value=Math.floor（此.currentTime）；
});
player.addEventListener（“progress”，function（））{
var duration=this.duration，buffered=this.buffered，i，p1，p2，css=[]；
如果（持续时间==0）{
返回；
}
对于（i=0；i
视频{
宽度：50%；
}
输入[type=“range”]{
宽度：50%；
高度：10px；
边框：1px实心rgb（15,15,15）；
边界半径：5px；
-webkit外观：无！重要；
}
输入[type=“range”]：-webkit滑块拇指{
宽度：20px；
高度：20px；
边界半径：50%；
背景：rgb（15,15,15）；
光标：指针；
-webkit外观：无！重要；
}
以下是我几年前做的类似事情的一个例子：


$（窗口）.on（“加载调整大小”，函数（）{
//获取滑块的当前宽度
var sliderWidth=$（'[type=range]'）.width（）；
//删除以前创建的样式元素
$（'.custom style元素与范围相关'）.remove（）；
//添加我们更新的样式
$（'input[type=“range”]：：-webkit滑块拇指{box shadow:-'+sliderWidth+'px 0'+sliderWidth+'px；}'）。附加到（'head'）；
});
.container{
保证金：0自动；
宽度：500px；
}
输入[type='range']{
宽度：100%；
}
/*铬*/
@媒体屏幕和（-webkit最小设备像素比：0）{
输入[type='range']{
溢出：隐藏；
-webkit外观：无；
背景色：#9a905d；
}
输入[type='range']：：-webkit滑块可运行轨迹{
高度：10px；
-webkit外观：无；
颜色：13bba4；
页边顶部：-1px；
}
输入[type='range']：：-webkit滑块拇指{
宽度：10px；
-webkit外观：无；
高度：10px；
光标：ew调整大小；
背景#4343；
颜色：#43e5f7；
}
}
/**FF*/
输入[type=“range”]：-moz范围进度{
背景色：#43e5f7；
}
输入[type=“range”]：-moz范围轨迹{
背景色：#9a905d；
}
/*即*/
输入[type=“range”]：-ms填充下限{
背景色：#43e5f7；
}
输入[type=“range”]：-ms填充上限{
背景色：#9a905d；
}

如果我正确理解OP想要什么，那么您需要在进度条上显示多个彩色区域。用户可以到处移动视频搜索栏，浏览器可以加载不连续的部分视频。问题是为部分输入设置颜色。我想我没有具体解释我的问题。所以我更新了问题。我想我没有具体解释我的问题。所以我更新了问题。我想我没有具体解释我的问题。所以我更新了这个问题。我现在还不能在家外面尝试我的代码。当我回来接受答案时，我会试试看