Javascript Internet Explorerで不透明スライダが動作しない

Question

スライダで画像の色を変更するためのコンポーネントが必要でした。これを行うために、Javascriptコードを変更して、スライダを移動したときに元の画像の上に異なる色の画像の不透明度を変更しました。また、不透明度と黒いdivを使って画像を暗くする調光機能を追加しました。

これはChromeとFirefoxで完璧に機能します。私の人生はInternet Explorerで動作させる方法を理解できません。私はJavascriptを初めて使っているので、明らかかもしれませんが、誰かを助けることができますか？

HTML

<img src="images/warm-1170.jpg" id="warm"> 
<img src="images/cool-1170.jpg" id="cool"> 
<div class="blackBoxDimmer" id="dimmer"></div> 
<div id="slidecontainer"> 
    <input type="range" min="0" max=".99" step=".01" value=".5" class="slider" id="myRange"> 
</div> 
<p id="x1">2700K</p> 
<p id="x2">5000K</p> 
<h4 id="sliderTitleColor">Color Adjustment</h4> 
<div id="dimAdjustSlider"> 
<div id="slidecontainer"> 
    <input type="range" min="0" max=".5" step=".01" value="0" class="slider" id="myRangeDim"> 
</div> 
</div> 
<p id="y1">5%</p> 
<p id="y2">100%</p> 
<h4 id="sliderTitleDim">Dimming Function</h4> 

CSS

body { 
    font-family: "arial", serif; 
} 
.container { 
    width: 1170px; 
    margin: 0 auto; 
    padding: 0; 
} 
.blackBoxDimmer { 
    display: block; 
    width: 1170px; /* !!!Adjust this to match image width */ 
    height: 671px; /* !!!Adjust this to match image height */ 
    margin-top: -675px; 
    opacity: 0; 
    background-color: black; 
} 
#warm { 
    position: absolute; 
} 
#cool { 
    opacity: .5; 
} 
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: 800px; 
} 
input[type=range]::-webkit-slider-runnable-track { 
    width: 800px; 
    height: 5px; 
    background: #ddd; 
    border: none; 
    border-radius: 3px; 
} 
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%; 
    background: #82c341; 
    margin-top: -4px; 
} 
input[type=range]:focus { 
    outline: none; 
} 
input[type=range]:focus::-webkit-slider-runnable-track { 
    background: #ccc; 
} 
input[type=range]::-moz-range-track { 
    width: 800px; 
    height: 5px; 
    background: #ddd; 
    border: none; 
    border-radius: 3px; 
} 
input[type=range]::-moz-range-thumb { 
    border: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%; 
    background: #82c341; 
} 
/*hide the outline behind the border*/ 

input[type=range]:-moz-focusring { 
    outline: 1px solid white; 
    outline-offset: -1px; 
} 

input[type=range]::-ms-track { 
    width: 800px; 
    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: #82c341; 
} 
input[type=range]:focus::-ms-fill-lower { 
    background: #888; 
} 
input[type=range]:focus::-ms-fill-upper { 
    background: #ccc; 
} 
#slidecontainer { 
    margin-top: 50px; 
    margin-left: 180px; 
} 
#dimAdjustSlider { 
    display: inline-block; 
    transform: rotate(180deg); 
    margin-left: 180px; 
    margin-bottom: 50px; 
} 
#y1 { 
    display: inline-block; 
    position: absolute; 
    font-size: 12px !important; 
    margin: 25px 0 0 -972px; 
} 
#y2 { 
    display: inline-block; 
    position: absolute; 
    font-size: 12px !important; 
    margin: 25px 0 0 -233px; 
} 
#sliderTitleDim { 
    margin-top: -70px; 
    margin-left: 513px; 
    margin-bottom: 75px; 
} 
.dimmingBox { 
    display: block; 
} 
#x1 { 
    display: inline-block; 
    font-size: 12px !important; 
    margin-left: 190px; 
    margin-right: 705px; 
    margin-bottom: 30px; 
} 

#x2 { 
    display: inline-block; 
    font-size: 12px !important; 
} 

#sliderTitleColor { 
    margin-top: -30px; 
    margin-bottom: 45px; 
    margin-left: 513px; 
} 
.textAlignLeft { 
    text-align: left !important; 
} 

Javascriptを

var slider = document.getElementById("myRange"); 
     var output = .5; 
     var imageTrans = document.getElementById("cool"); 
     output.innerHTML = slider.value; // Display the default slider value 

     // Update the current slider value (each time you drag the slider handle) 
     slider.oninput = function() { 
      output.innerHTML = this.value; 
      imageTrans.style.opacity = slider.value; 
     } 

     var sliderDim = document.getElementById("myRangeDim"); 
     var outputDim = 0; 
     var imageTransDim = document.getElementById("dimmer"); 
     outputDim.innerHTML = sliderDim.value; // Display the default slider value 

     // Update the current slider value (each time you drag the slider handle) 
     sliderDim.oninput = function() { 
      outputDim.innerHTML = this.value; 
      imageTransDim.style.opacity = sliderDim.value; 
     } 

ありがとう！

Answer 1

古いIEユーザーの場合は、JavaScript関数を追加するイベントをoninputからonchangeまたはonmousemoveに変更する必要があります。