Styling input range lower in CSS for Webkit?

Question

I am styling input[type=range] using CSS, and done with thumb and track.
All of three(-ms, -moz, -webkit) browser have proper prefix.

But, I don't know what vender prefix is suit to style progress on Webkit browser, such as Chrome. On Internet Explorer and Microsoft Edge, -ms-fill-lower works great.
On Firefox, using -moz-range-progress solved the problem.

input[type=range] {
 /*removes default webkit styles*/
 -webkit-appearance: none;
 
 /*fix for FF unable to apply focus style bug */
 border: 1px solid white;
 
 /*required for proper track sizing in FF*/
 width: 350px;
}

/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track { 
 width: 300px;
 height: 5px;
 background: #ccc;
 border: none;
 border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
 -webkit-appearance: none;
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #004d66;
 margin-top: -7px;
}
input[type=range]:focus {
 outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
 background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
 /* width: 150px;
 height: 5px; */
 background: #ccc;
 border: none;
 border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #004d66;
}
input[type=range]::-moz-range-progress {
 background: #33ccff;
 border-radius: 10px;
 height: 5px;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
 outline: 1px solid white;
 outline-offset: -1px;
}


/* Microsoft */
input[type=range]::-ms-track {
 
 height: 2px;
 /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
 background: transparent;
 
 /*leave room for the larger thumb to overflow with a transparent border */
 border-color: transparent;
 border-width: 6px 0;

 /*remove default tick marks*/
 color: transparent;
}
input[type=range]::-ms-thumb {
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #004d66;
 margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
 background: #33ccff;
 border-radius: 10px;
 height: 5px;
}
input[type=range]::-ms-fill-upper {
 background: #ccc;
 border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
 background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
 background: #ddd;
}

<input type="range" />

This example will work as I expected on Microsoft Edge, moz://a Firefox, and Internet Explorer, but looks differently on Chrome.

I already read Styling input range for webkit with pure CSS , and tried on mine,
but it works strangely when multiple input[type=range]s are on one document.

So, the question is,
Is there any proper vender prefix for styling track that thumb is already passed, only using CSS?

Could you provide a [mcve], preferably as a snippet here in the question. — Mr Lister, Mar 23 '17 at 13:44
@MrLister I added my stylesheet. [This](http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html) code is the base of mine. — Lee M.U., Mar 23 '17 at 15:14

score 1 · Accepted Answer · answered Feb 10 '18 at 01:06

To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />:

<input type="range">
    #shadow-root (user-agent)
        <div style="-webkit-appearance:inherit">
            <div pseudo="-webkit-slider-runnable-track" id="track">
               <div id="thumb">
               </div>
        </div>
    </div>
</input>

In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.

Styling input range lower in CSS for Webkit?

1 Answers1