样式搜索滑块 [英] Styling seek slider

查看：50 发布时间：2021/7/2 20:12:42 javascript html css video range

本文介绍了样式搜索滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我这里有这个视频播放器，但我遇到了一些问题.我正在尝试使搜索滑块在滑块拇指后显示不同的颜色.这就是我想要实现的

我到处找，都找不到适合我正在寻找的风格的作品，有没有办法做到这一点.

var vid、playbtn、seekslider、curtimetext、durtimetext、mutebtn、volumeslider、fullscreenbtn；函数初始化播放器(){//设置对象引用vid = document.getElementById("my_video");playbtn = document.getElementById("playpausebtn");seekslider = document.getElementById("seekslider");curtimetext = document.getElementById("curtimetext");durtimetext = document.getElementById("durtimetext");mutebtn = document.getElementById("mutebtn");volumeslider = document.getElementById("volumeslider");fullscreenbtn = document.getElementById("fullscreenbtn");//添加事件监听器playbtn.addEventListener("click",playPause,false);seekslider.addEventListener("change",vidSeek,false);vid.addEventListener("timeupdate",seektimeupdate,false);mutebtn.addEventListener("click",vidmute,false);volumeslider.addEventListener("change",setvolume,false);fullscreenbtn.addEventListener("click",toggleFullScreen,false);}window.onload = 初始化播放器；函数播放暂停(){如果(视频.暂停){视频播放()；playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/pause.png)";playbtn.style.backgroundSize="100% 100%";} 别的 {视频.暂停()；playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/play.png)";playbtn.style.backgroundSize="100% 100%";}}函数 vidSeek(){var seekto = vid.duration * (seekslider.value/100);vid.currentTime = 寻求；}函数seektimeupdate(){var nt = vid.currentTime * (100/vid.duration);seekslider.value = nt;var curmins = Math.floor(vid.currentTime/60);var cursecs = Math.floor(vid.currentTime - curmins * 60);var durmins = Math.floor(vid.duration/60);var dursecs = Math.floor(vid.duration - durmins * 60);if(cursecs < 10){ cursecs = "0"+cursecs;}if(dursecs <10){ dursecs = "0"+dursecs;}if(curmins <10){ curmins = "0"+curmins;}if(durmins <10){ durmins = "0"+durmins;}curtimetext.innerHTML = curmins+":"+cursecs;durtimetext.innerHTML = durmins+":"+dursecs;}函数 vidmute(){如果(视频.静音){视频静音 = 假；mutebtn.style.background = "url(file:///H:/SSEmery/player/unmute.png) no-repeat";mutebtn.style.backgroundSize="100% 100%";} 别的 {vid.muted = true;mutebtn.style.background = "url(file:///H:/SSEmery/player/mute.png) no-repeat";mutebtn.style.backgroundSize="100% 100%";}}函数 setvolume(){vid.volume =volumeslider.value/100;}功能切换全屏(){如果(视频.请求全屏){vid.requestFullScreen();} else if(vid.webkitRequestFullScreen){vid.webkitRequestFullScreen();} else if(vid.mozRequestFullScreen){vid.mozRequestFullScreen();}}

video#my_video {顶部:0px；位置:相对；宽度:100%；高度:56.2225%；}div.time {字体系列:等宽；颜色:#ffffff；文本阴影:1px 1px 0.5px #0000ff;背景:#4b4b4b；背景:-webkit-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);背景:-webkit-gradient(linear, left top, left bottom, from(#4b4b4b),color-stop(25%, #1e1e1e),color-stop(44%, #000000),to(#000000));背景:-o-线性梯度(顶部，#4b4b4b 0%，#1e1e1e 25%，#000000 44%，#000000 100%)；背景:线性渐变(到底部，#4b4b4b 0%，#1e1e1e 25%，#000000 44%，#000000 100%)；过滤器:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#000000',GradientType=0 );左边距:2px；显示:内联块；背景颜色:黑色；填充:2px 2px 2px 2px；边框:1px纯白色；边框半径:5px；}div#video_player_box {背景重复:不重复；背景尺寸:100% 85%；最大宽度:787px；最大高度:787px；边框顶部:5px 实心 #646464；右边框:5px 实心 #000000；左边框:5px 实心 #646464；边框底部:5px 实心 #000000；边距:0px 自动；背景:#000000；}div#video_controls_bar {背景:#9d9d9d；背景:-webkit-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);背景:-webkit-gradient(线性，左上，左下，从(#9d9d9d)，颜色停止(10％，#8d8d8d)，颜色停止(43％，#4f4f4f)，颜色停止(51％，#474747),色标(51%, #1e1e1e),to(#000000));背景:-o-线性梯度(顶部，#9d9d9d 0%，#8d8d8d 10%，#4f4f4f 43%，#474747 51%，#1e1e1e 51%，#000000 100%)；背景:线性渐变(到底部，#9d9d9d 0%，#8d8d8d 10%，#4f4f4f 43%，#474747 51%，#1e1e1e 51%，#000000 100%)；过滤器:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#000000',GradientType=0 );边框顶部:5px 实心 #000；右边框:5px 实心 #646464；左边框:5px 实心 #000；边框底部:5px 实心 #646464；填充顶部:10px；padding-right: 10px;padding-left: 10px;填充底部:10px；颜色:#fff;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}按钮#playpausebtn.playpausebtn {右:4px；边界半径:100%；背景尺寸:100% 100%；边界:无；大纲:无；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png)不重复；向左飘浮;宽度:44px；高度:44px；光标:指针；不透明度:1；}按钮#playpausebtn:悬停{宽度:44px；高度:44px；背景尺寸:100% 100%；边界:无；大纲:无；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonhover.png)不重复；}按钮#playpausebtn:活动{宽度:44px；高度:44px；背景尺寸:100% 100%；边界:无；大纲:无；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonclick.png)不重复；}按钮#fullscreenbtn {边界半径:100%；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreen.png)不重复；边框样式:实心；背景尺寸:100% 100%；边框顶部:2px 实心 #000；右边框:2px 实心 #646464；左边框:2px 实心 #000；边框底部:2px 实心 #646464；宽度:25px；浮动:对；高度:25px；光标:指针；不透明度:1；边界:无；大纲:无；}按钮#fullscreenbtn:悬停{背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenhover.png)不重复；边框样式:实心；背景尺寸:100% 100%；边框顶部:2px 实心 #000；右边框:2px 实心 #646464；左边框:2px 实心 #000；边框底部:2px 实心 #646464；宽度:25px；浮动:对；高度:25px；光标:指针；不透明度:1；边界:无；大纲:无；}按钮#fullscreenbtn:活动{背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenclick.png)不重复；边框样式:实心；背景尺寸:100% 100%；边框顶部:2px 实心 #000；右边框:2px 实心 #646464；左边框:2px 实心 #000；边框底部:2px 实心 #646464；宽度:25px；浮动:对；高度:25px；光标:指针；不透明度:1；边界:无；大纲:无；}按钮#mutebtn.mutebtn {位置:固定；背景尺寸:100% 100%；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png)不重复；宽度:25px；高度:25px；光标:指针；不透明度:1；边界:无；大纲:无；边界半径:100%；}按钮#mutebtn:悬停{背景尺寸:100% 100%；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png)不重复；宽度:25px；高度:25px；光标:指针；不透明度:1；边界:无；大纲:无；}按钮#mutebtn:活动{背景尺寸:100% 100%；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png)不重复；宽度:25px；高度:25px；光标:指针；不透明度:1；边界:无；大纲:无；}输入#seekslider {底边距:13px；浮动:对；-webkit-box-shadow:插入 0 0 1px 0.1px 白色；框阴影:插入 0 0 1px 0.1px 白色；大纲:无；最大高度:5px；高度:100%；宽度:100%；最大宽度:707px；浮动:顶部；背景:-webkit-gradient(线性，左上，左下，从(rgba(255,255,255,0.61))，颜色停止(10％，rgba(255，255，255，0.55))，颜色停止(43％，rgba(255，255，255),0.3)),色标(50%, rgba(255,255,255,0.27)),色标(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url(https)://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") 无重复中心；背景:-webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba,50,525rg(255,525rg),0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295478411864/Player/seek.png") 无重复中心；背景:-o-线性梯度(顶部，rgba(255,255,255,0.61)0%，rgba(255,255,255,0.55)10%，rgba(255,255,255,0.3)43%，rgba(5,255,525rg)(255,525,525rg),0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295478411864/Player/seek.png") 无重复中心；背景:线性梯度(到底部，rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,55,50.50(255,55,205)205) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files//seek.png") 无重复中心；背景尺寸:100% 100%；}输入#volumeslider {左边距:30px；-webkit-box-shadow:插入 0 0 1px 0.1px 白色；框阴影:插入 0 0 1px 0.1px 白色；大纲:无；最大宽度:128px；宽度:100%；高度:100%；最大高度:10px；背景:-webkit-gradient(线性，左上，左下，从(rgba(255,255,255,0.61))，颜色停止(10％，rgba(255，255，255，0.55))，颜色停止(43％，rgba(255，255，255),0.3)),色标(50%, rgba(255,255,255,0.27)),色标(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url(https)://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") 无重复中心；背景:-webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba,50,525rg(255,525rg),0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295478411864/Player/volume.png") 无重复中心；背景:-o-线性梯度(顶部，rgba(255,255,255,0.61)0%，rgba(255,255,255,0.55)10%，rgba(255,255,255,0.3)43%，rgba(5,255,525)2525252525,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295478411864/Player/volume.png") 无重复中心；背景:线性梯度(到底部，rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,55,50.50(255,55,205)205) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files//volume.png") 无重复中心；背景尺寸:100% 100%；}输入[类型='范围'] {-webkit-appearance:无！重要；边框宽度:1px；边框样式:实心；边框颜色:#000；}输入[type='range']::-webkit-slider-thumb {边界半径:100%；-webkit-appearance:无！重要；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timeslider.png)不重复；背景尺寸:100% 100%；高度:15px；宽度:15px；光标:指针；-webkit-transition:所有 0.5 秒轻松；-o-transition:所有 0.5 秒的缓和；过渡:全0.5s缓动；}输入[type='range']::-webkit-slider-thumb:hover {-webkit-appearance:无！重要；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderhover.png)不重复；背景尺寸:100% 100%；高度:18px；宽度:18px；光标:指针；}输入 [type='range']::-webkit-slider-thumb:active {-webkit-appearance:无！重要；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderclick.png)不重复；背景尺寸:100% 100%；高度:18px；宽度:18px；光标:指针；}输入 [type='range'].vol {-webkit-appearance:无！重要；边框宽度:1px；边框样式:实心；边框颜色:hsl(0, 0%, 0%);}输入[type='range'].vol::-webkit-slider-thumb {边界半径:100%；-webkit-appearance:无！重要；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/vol.png)不重复；背景尺寸:100% 100%；高度:15px；宽度:15px；光标:指针；-webkit-transition:所有 0.5 秒轻松；-o-transition:所有 0.5 秒的缓和；过渡:全0.5s缓动；}输入[type='range'].vol::-webkit-slider-thumb:hover {-webkit-appearance:无！重要；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png)不重复；背景尺寸:100% 100%；高度:18px；宽度:18px；光标:指针；}输入[type='range'].vol::-webkit-slider-thumb:active {-webkit-appearance:无！重要；背景:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png)不重复；背景尺寸:100% 100%；高度:18px；宽度:18px；光标:指针；}

<头><身体><div id="video_player_box"><video id="my_video" width="100%" height="56.2225%" controlslist="nodownload"><source src="https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/test.mp4" ></视频><身体><div id="video_controls_bar"><input id="seekslider" type="range" min="0" max="100" value="0" step="1"><button id="playpausebtn" class="playpausebtn" style="背景尺寸:100% 100%;""背景图片:url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png);"><;/按钮><div class="time"><span id="curtimetext">SSEmery</span>/<span id="durtimetext">播放器</span>

<button id="mutebtn" class="mutebtn" style="background-size: 100% 100%;"背景图片:网址(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png)不可重复；"></按钮><input id="volumeslider" class="vol" type="range" min="0" max="100" value="100" step="1"><button id="fullscreenbtn"></button>

</html>

解决方案

目前还没有针对滑块内部不同组件样式的标准化规范(的input范围 类型).要实现此效果，您可以使用以下两种方法之一:

使用非标准和实验性供应商特定的伪元素
即使没有标准的方法来实现这一点，所有主流浏览器供应商正在使用一些伪元素来控制滑块的样式.
- Chrome/Safari/Opera:没有直接控制range类型的input的样式在 WebKit 中.类似的方法是使用元素作为滑块.::-webkit-progress-value 控制拇指前的轨迹样式(MDN <代码>::-webkit-progress-value);
- 火狐:::-moz-range-progress 控制拇指前的轨迹样式(MDN <代码>::-moz-range-progress);
- 边缘/IE:::-ms-fill-lower 和 ::-ms-fill-upper 控制左右拇指轨迹的侧面(或垂直滑块的下部和上部)分别.(MDN <代码>::-ms-fill-lower 和 MDN ::-ms-fill-upper).
您可以分别检查每个页面以将样式规则应用于特定的滑块轨道的一部分.
这种方法要求您在不同的浏览器.当浏览器改变时，你的风格可能会在未来被打破他们对这些 CSS 规则的解释.但这可以在纯CSS.
使用一组 DOM 节点组成一个滑块
由于滑块纯粹是一个控件，用于指示当前进度并提供用户更改进度的界面，您可以使用一组 DOM 节点来实现这一点并注册相关的事件监听器来处理交互与用户.

I have this video player here and I'm having trouble with something. I'm Trying to make the seekslider show a different color after the slider thumb. This is What I'm trying to achive

I looked everywhere and cannot find one that works and matches a the style I'm looking for, Is there any possible way to do this.

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
	// Set object references
	vid = document.getElementById("my_video");
	playbtn = document.getElementById("playpausebtn");
	seekslider = document.getElementById("seekslider");
	curtimetext = document.getElementById("curtimetext");
	durtimetext = document.getElementById("durtimetext");
	mutebtn = document.getElementById("mutebtn");
	volumeslider = document.getElementById("volumeslider");
	fullscreenbtn = document.getElementById("fullscreenbtn");
	// Add event listeners
	playbtn.addEventListener("click",playPause,false);
	seekslider.addEventListener("change",vidSeek,false);
	vid.addEventListener("timeupdate",seektimeupdate,false);
	mutebtn.addEventListener("click",vidmute,false);
	volumeslider.addEventListener("change",setvolume,false);
	fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function playPause(){
	if(vid.paused){
		vid.play();
		playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/pause.png)";
playbtn.style.backgroundSize="100% 100%";
	} else {
		vid.pause();
		    playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/play.png)";
playbtn.style.backgroundSize="100% 100%";
	}
}


function vidSeek(){
	var seekto = vid.duration * (seekslider.value / 100);
	vid.currentTime = seekto;
}
function seektimeupdate(){
	var nt = vid.currentTime * (100 / vid.duration);
	seekslider.value = nt;
	var curmins = Math.floor(vid.currentTime / 60);
	var cursecs = Math.floor(vid.currentTime - curmins * 60);
	var durmins = Math.floor(vid.duration / 60);
	var dursecs = Math.floor(vid.duration - durmins * 60);
	if(cursecs < 10){ cursecs = "0"+cursecs; }
	if(dursecs < 10){ dursecs = "0"+dursecs; }
	if(curmins < 10){ curmins = "0"+curmins; }
	if(durmins < 10){ durmins = "0"+durmins; }
	curtimetext.innerHTML = curmins+":"+cursecs;
	durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
	if(vid.muted){
		vid.muted = false;
		mutebtn.style.background = "url(file:///H:/SSEmery/player/unmute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
	} else {
		vid.muted = true;
		mutebtn.style.background = "url(file:///H:/SSEmery/player/mute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
	}
}
function setvolume(){
	vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
	if(vid.requestFullScreen){
		vid.requestFullScreen();
	} else if(vid.webkitRequestFullScreen){
		vid.webkitRequestFullScreen();
	} else if(vid.mozRequestFullScreen){
		vid.mozRequestFullScreen();
	}
}

video#my_video {
    top: 0px;
    position: relative;
    width: 100%;
    height: 56.2225%;
}

div.time {
    font-family: monospace;
    color: #ffffff;
    text-shadow: 1px 1px 0.5px #0000ff;
    background: #4b4b4b;
    background: -webkit-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b),color-stop(25%, #1e1e1e),color-stop(44%, #000000),to(#000000));
    background: -o-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    background: linear-gradient(to bottom, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#000000',GradientType=0 );
    margin-left: 2px;
    display: inline-block;
    background-color: black;
    padding: 2px 2px 2px 2px;
    border: 1px solid white;
    border-radius: 5px;
}

div#video_player_box {
    background-repeat: no-repeat;
    background-size: 100% 85%;
    max-width: 787px;
    max-height: 787px;
    border-top: 5px solid #646464;
    border-right: 5px solid #000000;
    border-left: 5px solid #646464;
    border-bottom: 5px solid #000000;
    margin: 0px auto;
    background: #000000;
}

div#video_controls_bar {
    background: #9d9d9d;
    background: -webkit-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#9d9d9d),color-stop(10%, #8d8d8d),color-stop(43%, #4f4f4f),color-stop(51%, #474747),color-stop(51%, #1e1e1e),to(#000000));
    background: -o-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    background: linear-gradient(to bottom, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#000000',GradientType=0 );
    border-top: 5px solid #000;
    border-right: 5px solid #646464;
    border-left: 5px solid #000;
    border-bottom: 5px solid #646464;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

button#playpausebtn.playpausebtn {
    right: 4px;
    border-radius: 100%;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png) no-repeat;
    float: left;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 1;
}

button#playpausebtn:hover {
    width: 44px;
    height: 44px;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonhover.png) no-repeat;
}

button#playpausebtn:active {
    width: 44px;
    height: 44px;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonclick.png) no-repeat;
}

button#fullscreenbtn {
    border-radius: 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreen.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#fullscreenbtn:hover {
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenhover.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#fullscreenbtn:active {
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenclick.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#mutebtn.mutebtn {
    position: fixed;
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
    border-radius: 100%;
}

button#mutebtn:hover {
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#mutebtn:active {
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

input#seekslider {
    margin-bottom: 13px;
    float: right;
    -webkit-box-shadow: inset 0 0 1px 0.1px white;
    box-shadow: inset 0 0 1px 0.1px white;
    outline: none;
    max-height: 5px;
    height: 100%;
    width: 100%;
    max-width: 707px;
    float: top;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background-size: 100% 100%;
}

input#volumeslider {
    margin-left: 30px;
    -webkit-box-shadow: inset 0 0 1px 0.1px white;
    box-shadow: inset 0 0 1px 0.1px white;
    outline: none;
    max-width: 128px;
    width: 100%;
    height: 100%;
    max-height: 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background-size: 100% 100%;
}

input[type='range'] {
    -webkit-appearance: none !important;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}

input[type='range']::-webkit-slider-thumb {
    border-radius: 100%;
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timeslider.png) no-repeat;
    background-size: 100% 100%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

input[type='range']::-webkit-slider-thumb:hover {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderhover.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range']::-webkit-slider-thumb:active {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderclick.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range'].vol {
    -webkit-appearance: none !important;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(0, 0%, 0%);
}

input[type='range'].vol::-webkit-slider-thumb {
    border-radius: 100%;
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/vol.png) no-repeat;
    background-size: 100% 100%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

input[type='range'].vol::-webkit-slider-thumb:hover {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range'].vol::-webkit-slider-thumb:active {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="video_player_box">
 <video id="my_video"  width="100%" height="56.2225%" controlslist="nodownload">
    <source src="https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/test.mp4" >
  </video>
 </head>
 <body>
  <div id="video_controls_bar">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<button id="playpausebtn" class="playpausebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png);"></button>
<div class="time">
  <span id="curtimetext">SSEmery</span> / <span id="durtimetext">Player</span>
  </div>
<button id="mutebtn" class="mutebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;"></button>
    <input id="volumeslider" class="vol" type="range" min="0" max="100" value="100" step="1">
    <button id="fullscreenbtn"></button> 
</div>
</div>
</body>
</html>

解决方案

Currently, there are not any standardized specifications that targeting on the styling of different components inside of a slider (input of range type). To implement this effect, you can use one of the following two approaches:

Use non-standard and experimental vendor-specific pseudo-element

Even though there are no standard way to achieve this, all major browser vendors are using some pseudo-element to provide control of style of slider.
- Chrome / Safari / Opera: There is no direct means to control the style of input of range type in WebKit. A similar approach is use <progress /> element as slider. ::-webkit-progress-value controls the style of track before the thumb (MDN ::-webkit-progress-value);
- Firefox: ::-moz-range-progress controls the style of track before the thumb (MDN ::-moz-range-progress);
- Edge / IE: ::-ms-fill-lower and ::-ms-fill-upper controls the left and right side (or lower and upper for vertical slider) of the track of the thumb respectively. (MDN ::-ms-fill-lower and MDN ::-ms-fill-upper).
You can check each page respectively to apply style rules to specific portion of the track of a slider.

This approach requires you to maintain lots of style across different browsers. And your style may break in the future when browser changed their interpretation of these CSS rules. But this can be achieve in pure CSS.
Use a set of DOM nodes to compose a slider

Since a slider is purely a control to indicate current progress and provide interface for user to change the progress, you can use a set of DOM nodes to achieve this and register related event listener to handle the interaction with user.

这篇关于样式搜索滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

样式搜索滑块 [英] Styling seek slider

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

样式搜索滑块 [英] Styling seek slider

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭