多个范围滑块在IE 11中不起作用

Question

我使用多个范围滑块来获取最小值和最大值，对于chrome和safari和Firefox来说都可以正常工作，但是IE 11滑块无法正常工作

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 300px;
    position:absolute;
    pointer-events: all;
    }
    
input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
   
    -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    /*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;
    color: transparent;
     position:absolute;
     }
     
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
     position:relative;
    z-index:9999;}
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;
      position:relative;
    z-index:1;
    }
    
input[type=range]:focus::-ms-fill-lower {
    background: #888;
    }
    
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
    }
    
input[type=range]:first-of-type::-ms-track {
    -moz-appearance: none;
    background: none transparent;
    -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;z-index: 9999;position: relative;
            }

<input type="range" value="0" min="0" max="50"> <input type="range" value="100" min="50" max="100">