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

Question

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/

Sean King · Accepted Answer · 2015-11-03 10:59:14Z

3

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

answered Nov 3, 2015 at 10:59

Sean King

2231 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajith S · Accepted Answer · 2015-07-06 12:48:56Z

2

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/

answered Jul 6, 2015 at 12:48

Ajith S

512 bronze badges

1 Comment

FireBrand Over a year ago

the ::-moz-range-track and ::-moz-range-thumb only take you so far, i'm trying to get the effect of the bar filling as you move it like in the snippet on chrome

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related