Different z-index for thumb and track in html5 range slider in firefox

Question

For the "range" input element in HTML5, there is a nice way to style the thumb and track separately. The only problem being it works differently on different browsers. Daniel Stern has done some great work on this. Also he's written an online tool which generates the basic css styles for cross browser range input styling- range.css, I'm using these styles but I'm facing a few problems when using the z-index parameter.

In the webkit styles, its easy to give different z-index values to the thumb and track by setting the position to relative and assigning a z-index value.

This method doesn't work in the Firefox styles. Firefox would just ignore the z-index values of the track and thumb.

I am trying to draw a div element on the lower half of the range slider to make the lower and upper halves look different. So effectively i want my z-index values to be like this track < div < thumb

I have written a codepen to show this behavior. Its working perfectly in Chrome/Safari, but not in Firefox. Try opening it in Chrome/Safari to see how I it should behave in Firefox. http://codepen.io/anon/pen/vOmQxr

How can i achieve similar behavior for Firefox? or is there any other way to style the upper and lower halves of the range slider separately for Firefox?(without external libs)

Answer 1

I know you asked this question a while ago but I actually spent some time to find a workaround solution for this issue.

The issue is z-index with pseudo elements of input range works differently on Firefox and Chrome. What you will have to do is to make the input range track's background to be transparent. Create a div divFill that will replicate the track and make it the lowest z-index. Then, divLowerFill is the next highest z-index. After that, put the input field as the next highest z-index. Since we made the background color for input range to be transparent, the lower elements should be visible. Of course, make the thumb pseudo element to be the highest z-index.

Although I didn't debug this on IE but the concept should work. Here's code snippet that I made some modifications on your Codepen code.

document.getElementById("rangeinput").addEventListener("input", function(e){
var rangeInput=document.getElementsByClassName("divLowerFill")[0];             rangeInput.style.width=e.target.offsetWidth*e.target.value/100 +"px";
});

.parent {
  display:inline-block;
  margin-left: 35px;
  position:relative;
}

/* repplicating input range track background */
.divFill {
  position: absolute;
  width: 100%;
  height: 6px;
  top: 7px;
  z-index: -2;
  background: #00c9ff;
}

/* track fill */
.divLowerFill {
  position: absolute;
  height: 6px;
  width: 70px;
  top: 7px;
  background-color: #273042;
  z-index: 0;
  pointer-events:none;

}

/* input range track style settings */
input[type=range] {
  -webkit-appearance: none;
  width: 70px;
  margin: 2px 0;
  vertical-align: middle;
  position: relative;
  background-color: transparent;
}
input[type=range]:focus {
  outline: none;
}

/* Chrome, Safari track style settings */
input[type=range]::-webkit-slider-runnable-track {
  width: 100px;
  height: 6px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border-radius: 0px;
  z-index: 1;
  border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0px solid rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2px;
  z-index: 2000;
  position: relative;
}

/* Firefox track style settings */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: none transparent;
  border-radius: 0px;
  border: 0px solid rgba(0, 0, 0, 0);
  position: relative;
  z-index: -1;

}
input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0px solid rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  /*cursor: pointer;*/
  position: relative;
  z-index: 100;

}

/* IE style settings */
input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #00c5fa;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #00c9ff;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0px solid rgba(255, 255, 255, 0);
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  height: 6px;
  z-index: 2000;
  position: relative;

}
input[type=range]:focus::-ms-fill-lower {
  background: #00c9ff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #05caff;
}

<div class="parent">
  <div class="divFill"></div>
  <div class="divLowerFill"></div>
  <input id="rangeinput" type="range" min=0 max=100 value=100>
</div>