如何使用输入[type = range] CSS伪元素与firefox和IE

Question

我有一个type="range"属性的输入，需要充当自定义html 5视频播放器的“搜索栏”。 我已经完成了所有-webkit...个工作（除了缓冲...）而我正在尝试为FF和IE（10和11）重新创建它们，那会是最好的方法吗？

这是我得到的css：

input[type=range] {
	-webkit-appearance: none;
	border-radius: 0px;
	vertical-align: middle;
	margin: -8px 0 0 0;
	padding: 3px 0 3px 0;
	position: relative;
	vertical-align: middle;
	overflow-x: hidden;
	overflow-y: visible;
	width: 100%;
	background: transparent;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	position: relative;
	pointer-events:none;
	width: 4px;
	height: 100%;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1), 0px 0px 1.8px rgba(13, 13, 13, 0.1);
    border: 0.4px solid rgba(30, 170, 241, 0.57);
    background: #1eaaf1;
    cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
	background: #757575; 
	height: 4px;
	margin:5px 0;

}
input[type=range]::-webkit-slider-thumb:before {
	content:"-";
	font-style: 0;
	line-height:0;
	position: absolute;
	left:-3000px;
	right:0;
	top:0;
	bottom:0;
	background: red;
}
input[type=range]::-webkit-slider-thumb:after {
	content: "";
	position: absolute;
	left:-8px;
	right:-8px;
	top:-8px;
	bottom:-8px;
	background: red;
	border-radius: 50%;
	z-index: 10;
}
input[type=range]:focus {
	outline:none;
}
input[type=range]:hover::-webkit-slider-thumb:after,
input[type=range]:focus::-webkit-slider-thumb:after {
	background: red;
}
input[type=range]:disabled::-webkit-slider-thumb:before {
	background-color: #a1151a;
}
input[type=range]:disabled::-webkit-slider-thumb:after {
	background: #adadad !important;
}

<input type="range" />

这里也是一个jsFiddle：http://jsfiddle.net/goldzimer/yttap7qj/

提前感谢！

更新：在为Firefox和IE添加一些css之后我现在处于只有在Firefox上我无法获得左侧有一种颜色和右侧的效果另一个。

以下是更新的jsfiddle：http://jsfiddle.net/goldzimer/yttap7qj/5/

Answer 1

你在FF上填充的伪选择器是::-moz-range-progress

Answer 2

您尝试过这些解决方案了吗？

::-moz-range-track 
::-moz-range-thumb. 
::-ms-track
::-ms-fill-lower
::-ms-fill-upper
::-ms-thumb

http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/