Fill the bottom of the cross-range control browser

Question

For example, look at this fiddle (not in IE, please).

(You can see the description of the control at this link .)

It uses -ms-fill-lower and -ms-fill-upper to control the color on either side of the thumb, like this:

input[type=range]::-ms-track {
  width: 300px;
  height: 5px;

  /*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-fill-lower {
  background: #777;
  border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

_{(source: brennaobrien.com )}

However, as far as I can tell, pseudo-elements ... ::-ms- ...only work in IE. In Chrome, the code above seems to have no effect. In Chrome, I just get the following:

_{(source: brennaobrien.com )}

What can I do to achieve this cross-browser effect?

Thank!

Answer 1

, : http://codepen.io/ryanttb/pen/fHyEJ :

input::-moz-range-track{
    background: linear-gradient(90deg,black 50%,grey 50%);
}

, js, .

Answer 2

- - HTML5 - , . https://www.w3schools.com/howto/howto_js_rangeslider.asp.

, css:

.slidecontainer {
    display:inline-block;
    vertical-align:middle;
    width: 60%;
    position:relative;
    margin:5px 0;
    background:url('/images/cyan_back.png') no-repeat left top;
    background-size:0 14px;
    border-radius:7px;
}

jquery:

$('.slidecontainer').css('background-size',$(this).val()+'% 14px');

, .