Grow your store with our weekly podcasts, videos, and letters. JOIN NOW
Ethercycle logo

(Yeah, I know that title made your heart all a-flutter)

When building the website for my upcoming wedding, I had a bright idea - why not create His and Hers versions of the site? The general layout could stay the same, but the styles could be radically changed via CSS. I could put in a switch that would allow the user to flip back and forth. While this could be done with a styled checkbox input (much like we did on RainyCafe), I decided to do this this via the range input, because I have a strange fascination with it and I liked the idea of the user pulling something instead of just clicking it. Of course the browser default style wouldn't do, I had to Make It Look Nice™

Like any other recently-implemented element (Internet Explorer got range inputs in Feb 2013, Firefox in Aug 2013. Chrome's had it forever, natch) this turned out be easier said than done, and I needed to give myself a quick crash course in all the different browser proclivities. Now, to make things easier for everyone else, here's all my knowledge collected in one place. All of this works for Chrome, Safari, Fx 23+, and IE10+. IE9 users will need a polyfill or are SOL (but we don't want to encourage those people anyway). Let's get started.

First we'll do the actual slider area.

/* Kill focus so you don't get stupid outlines on things */
::-moz-focus-inner {outline:0;}
:focus {outline:0;}

/* Styling the tracks. Each browser needs certain elements to be done separately or it barfs */
input[type=range] {
	padding: 0; margin: 0;
	background: transparent;
	box-sizing: border-box;
	vertical-align: top;
	-webkit-appearance: none;
	width: 220px;
	border: 2px solid #898989;
	background-image: linear-gradient(to right, #ff55b1, #42a8f7);
	border-radius: 30px;
	box-shadow: inset 0px 3px 6px 1px rgba(0,0,0,0.25);
	color: transparent;
	height: 21px;
}

input[type=range]::-moz-range-track {
	border: 2px solid #dddddd;
    background-image: linear-gradient(to right, #ed4fa5, #3a94d9);
	height: 21px;
	border-radius: 30px;
	box-shadow: inset 0px 3px 6px 1px rgba(0,0,0,0.25);
}
input[type=range]::-moz-focus-outer {border: none;}

/* IE needs track colors defined for both before and after the thumb passes */
input[type="range"]::-ms-fill-upper {background-image: linear-gradient(to right, #ed4fa5, #3a94d9);}
input[type="range"]::-ms-fill-lower {background-image: linear-gradient(to right, #ed4fa5, #3a94d9);}

/* IE has it's own special default track w/tick marks that need to be hidden */
input[type="range"]::-ms-track {
	border: none;
	color: transparent;
}

See the Pen vpKru by Paul Reda (@paulreda) on CodePen.

Then the thumb button

/* Now styling the thumbs. Again, each sold separately. */
input[type=range]::-webkit-slider-thumb {
	height: 54px;
	width: 54px;
	background-color: transparent;
	background-image:url("../img/thumb.png");
	background-size: contain;
	border: none;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
}

input[type=range]::-moz-range-thumb {
	height: 54px;
	width: 54px;
	background-color: transparent;
	background-image:url("../img/thumb.png");
	background-size: contain;
	border: none;
	outline: none;
	cursor: pointer;
}

/* In IE, the thumb CANNOT be bigger than the track. This sucks. So we call a different thumb image. */
input[type=range]::-ms-thumb {
	height: 54px;
	width: 54px;
	background-color: transparent;
	background-image:url("../img/iethumb.png");
	background-size: contain;
	border: none;
	outline: none;
}

/* IE also has a tooltip that appears by default. This can't be styled, only hidden, so we hide it. */
input[type=range]::-ms-tooltip {display: none;}

See the Pen mzluc by Paul Reda (@paulreda) on CodePen.

And here's what we end up with. First IE, then everything else

As you might expect, IE is the bad boy in all of this with it's inability to have a thumb button that's larger than the track, constraining what kind of designs you can use. That being said, I do like that IE & Safari will fire off events while you're still moving the thumb, while Chrome & Firefox will not fire anything until the user stops moving the slider and releases the mouse button. Overall, this gives Safari the best implementation with both a full range of style options, and a better user experience.