造型寻找滑块

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了造型寻找滑块相关的知识，希望对你有一定的参考价值。

我有这个视频播放器，我遇到了麻烦。我试图让滑板拇指后的seeklider显示不同的颜色。 This is What I'm trying to achive

我到处寻找，找不到一个有效的，符合我正在寻找的风格，有没有办法做到这一点。

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

目前，没有任何标准化的规范针对滑块内部不同组件的样式（input类型的range）。要实现此效果，您可以使用以下两种方法之一：

  1. 使用非标准和实验性供应商特定的伪元素 即使没有标准的方法来实现这一点，所有主要的浏览器供应商都使用一些伪元素来提供滑块样式的控制。 Chrome / Safari / Opera：没有直接的方法来控制WebKit中input类型的range的风格。类似的方法是使用<progress />元素作为滑块。 ::-webkit-progress-value控制拇指之前的赛道风格（MDN ::-webkit-progress-value）; Firefox：::-moz-range-progress控制拇指之前的轨道风格（MDN ::-moz-range-progress）; Edge / IE：::-ms-fill-lower和::-ms-fill-upper分别控制拇指轨道的左侧和右侧（或垂直滑块的下部和上部）。 （MDN ::-ms-fill-lower和MDN ::-ms-fill-upper）。 您可以分别检查每个页面以将样式规则应用于滑块轨道的特定部分。 这种方法要求您在不同的浏览器中保持大量的风格。当浏览器改变对这些CSS规则的解释时，您的风格可能在未来中断。但这可以在纯CSS中实现。
  2. 使用一组DOM节点组成滑块 由于滑块纯粹是用于指示当前进度并为用户提供更改进度的界面的控件，因此您可以使用一组DOM节点来实现此目的并注册相关的事件侦听器以处理与用户的交互。

以上是关于造型寻找滑块的主要内容，如果未能解决你的问题，请参考以下文章

html 手风琴滑块 - 采用全新造型设计

从头开始查看寻呼机图像（片段）滑块

滑块菜单片段中的可交换选项卡

寻找特定类型的 jQuery 内容滑块 [关闭]

无法使Slider具有响应能力

带有标签和 Viewpager 的 Android 片段