I am having trouble styling the HTML input range element. I have successfully styled it for webkit browsers, but my styling does not seem to work on -moz- browsers. I attempted to use pseudo elements before and after on moz-range-thumb, but it seems that Firefox does not support this feature. Unfortunately, I could not find any proper documentation on this issue. If anyone can provide a solution, I would greatly appreciate it.
Here is the Moz specific styling I applied, which mirrors what I did for webkit browsers:
input[type=range]::-webkit-slider-thumb:before {
position: absolute;
top: 5px;
left: -2000px;
width: 2000px;
height: 6px;
margin-left: -2px;
background: #666;
content: ' ';
}