范围滑块-如何在IE / Edge上设置样式？

Question

I'm trying to style this range slider on IE. It's been quite a nightmare. Anyone knows why fill color for the track doesn't work? It's also not quite applying border-radius on the track.

   &::-ms-track {
        box-sizing: border-box;
        border: none;
        width: 12.5em;
        height: 8px;
        background: $beige-yellow;
        border-radius: 12px;
    }

    &::-ms-fill-lower {
        height: 8px;
        background: $army-green;
    }

    &::-ms-fill-upper {
        background: $beige-yellow;
    }

See full code here: https://codepen.io/anon/pen/PMQKdp

Answer 1

First, we should use input[type="range"] before the IE proprietary pseudo-elements to style the range slider in IE and Edge. So we should delete the .slider::-ms-track , .slider::-ms-fill-lower , .slider::-ms-thumb , .slider::-ms-tooltip part in CSS and write like below instead:

    input[type="range"]::-ms-fill-lower {
        ...
    }
    input[type="range"]::-ms-fill-upper {
        ...
    }
    input[type="range"]::-ms-track {
        ...
    }
    input[type="range"]::-ms-thumb {
        ...
    }
    input[type="range"]::-ms-tooltip {
        ...
    }

Second, the => arrow function in JavaScript is not supported in IE. You could use the Babel's translation to make it compatible with IE.

So the final code is like this:

 var _R = document.querySelector('[type=range]'); _R.style.setProperty('--val', +_R.value); _R.style.setProperty('--max', +_R.max); _R.style.setProperty('--min', +_R.min); document.documentElement.classList.add('js'); _R.addEventListener('input', function(e) { _R.style.setProperty('--val', +_R.value); }, false); 

 input:focus { outline: none; } .slider { -webkit-appearance: none; --range: calc(var(--max) - var(--min)); --ratio: calc((var(--val) - var(--min))/var(--range)); --sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em)); margin: 0; padding: 0; width: 100%; height: 1.5em; background: transparent; font: 1em/1 arial, sans-serif; border: none; } .slider, .slider::-webkit-slider-thumb { -webkit-appearance: none; } .slider::-webkit-slider-runnable-track { box-sizing: border-box; border: none; width: 12.5em; height: 0.5em; background: #ccc; } .js .slider::-webkit-slider-runnable-track { background: linear-gradient(#7b1c1a, #7b1c1a) 0/var(--sx) 100% no-repeat #ccc; } .slider::-moz-range-track { box-sizing: border-box; border: none; height: 0.5em; background: #ccc; } .slider::-moz-range-progress { height: 0.5em; background: #7b1c1a; } .slider::-webkit-slider-thumb { position: relative; z-index: 99; margin-top: -0.550em; box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #7b1c1a; } .slider::-moz-range-thumb { position: relative; z-index: 99; box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #7b1c1a; } #tickmarks { display: flex; justify-content: space-between; padding: 0 10px; } #tickmarks p { position: relative; display: flex; justify-content: center; text-align: center; width: 4px; height: 4px; background: green; color: green; border-radius: 100%; line-height: 54px; top: -34px; left: 3px; z-index: 0; } input[type="range"]::-ms-fill-lower { background: #7b1c1a; } input[type="range"]::-ms-fill-upper { background: transparent; } input[type="range"]::-ms-track { height: 7px; border: 1px solid #bdc3c7; background-color: #ccc; } input[type="range"]::-ms-thumb { position: relative; z-index: 99; margin-top: 0; box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #7b1c1a; } input[type="range"]::-ms-tooltip { display: none; } 

 <div class="slidecontainer"> <input type="range" min="5" max="20" value="10" step='2.5' class="slider" id="myRange" list='tickmarks'> <div id="tickmarks"> <p>5</p> <p>7.5</p> <p>10</p> <p>12.5</p> <p>15</p> <p>17.5</p> <p>20</p> </div> </div> 

Besides, here's a very useful article about styling range slider across multiple browsers, you could also check it.