CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
FireBrand
FireBrand

Reputation: 493

how to use input[type=range] CSS Pseudo-elements with firefox and IE

I have an input with a type="range" attribute that needs to act as a 'seekbar' for a custom html 5 video player. i've got all the -webkit... things working (except for buffering...) and i'm trying to recreate them for FF and IE (10 and 11), what would be the best way?

here is the css i've got:

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" />

here is a jsFiddle for that as well: http://jsfiddle.net/goldzimer/yttap7qj/

thanks in advance!

Update: after adding some css for Firefox and IE i am now at a point where only on Firefox i can't get the effect of having the left side with one color and the right side with another.

Here is the updated jsfiddle: http://jsfiddle.net/goldzimer/yttap7qj/5/

Upvotes: 1

Views: 3782

Answers (2)

Sean King
Sean King

Reputation: 213

The pseudo selector you're after for the fill on FF is ::-moz-range-progress

Upvotes: 3

Ajith S
Ajith S

Reputation: 51

Did you tried these solutions ? 

::-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/

Upvotes: 2

Related Questions