Range Slider無法在Internet Explorer上運行，只能在其他瀏覽器上運行

Question

我的范圍滑塊在Internet Explorer 11上不起作用，除了所有其他瀏覽器均100％支持該插件並且也可以正常工作。

 $(function() { $(".slider").rangeslider(); }); $.fn.rangeslider = function(options) { var obj = this; var defautValue = obj.attr("value"); obj.wrap("<span class='range-slider'></span>"); obj.after("<span class='slider-container'><span class='bar'><span></span></span><span class='bar-btn'><span>0</span></span></span>"); obj.attr("oninput", "updateSlider(this)"); updateSlider(this); return obj; }; function updateSlider(passObj) { var obj = $(passObj); var value = obj.val(); var min = obj.attr("min"); var max = obj.attr("max"); var range = Math.round(max - min); var percentage = Math.round((value - min) * 100 / range); var nextObj = obj.next(); nextObj.find("span.bar-btn").css("left", percentage + "%"); nextObj.find("span.bar > span").css("width", percentage + "%"); nextObj.find("span.bar-btn > span").text(percentage); }; 

 .range-slider { margin: 30px 0 0; display: inline-block; width: 100%; box-sizing: border-box; position: relative; } .range-slider>input { opacity: 0; width: 100%; position: relative; z-index: 5; -webkit-appearance: none; } .range-slider>input::-webkit-slider-thumb { -webkit-appearance: none; z-index: 100; position: relative; width: 50px; height: 30px; -webkit-border-radius: 10px; } .range-slider>span.slider-container { // min-height: 110px; display: inline-block; position: absolute; top: 0px; left: -8px; right: 46px; z-index: 3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .range-slider>span.slider-container>span.bar { background-color: #e5e5e5; display: inline-block; position: absolute; z-index: 1; top: 17px; left: 0; right: 0; height: 3px; overflow: hidden; border-radius: 10px; } .range-slider>span.slider-container>span.bar>span { background: #d7302d; background: -webkit-gradient(left top, right bottom, color-stop(0, #d7302d), color-stop(100%, #e82573)); background: linear-gradient(135deg, #d7302d 0, #e82573 100%); display: inline-block; float: left; height: 3px; width: 0%; } .range-slider>span.slider-container>span.bar-btn { position: absolute; text-align: center; top: 0; color: #fff; font: 600 16px "Roboto Condensed", sans-serif; z-index: 1; text-align: center; width: 38px; height: 38px; line-height: 38px; } .range-slider>span.slider-container>span.bar-btn:after { content: ""; background-color: #cc202e; border-radius: 20px; width: 38px; height: 38px; display: inline-block; position: absolute; left: 0; top: 0; z-index: -1; -webkit-box-shadow: 0 0 0 4px #cc202e; box-shadow: 0 0 0 4px rgba(204, 32, 46, 0.2) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Please Select</h1> <input class="slider" value="20" min="0" max="100" name="rangeslider" type="range" /> 

最近兩天來，我一直在用這段代碼來敲打我的頭。 我無法從許多站點得到任何答案。 我已經搜索過Google和w3schools以獲得幫助，但我認為這樣他們無論如何都可以幫助我。

所以，我來到這里發布問題

如果有人可以解決這個問題，將不勝感激。

Answer 1

您可以使用input和change事件在所有瀏覽器中獲得一致的用戶體驗：

 $(this).on("change input", function() {
   updateSlider(this);
 });

 $(function() { $(".slider").rangeslider(); }); $.fn.rangeslider = function(options) { var obj = this; var defautValue = obj.attr("value"); obj.wrap("<span class='range-slider'></span>"); obj.after("<span class='slider-container'><span class='bar'><span></span></span><span class='bar-btn'><span>0</span></span></span>"); $(this).on("change input", function() { updateSlider(this) }); return obj; }; function updateSlider(passObj) { var obj = $(passObj); var value = obj.val(); var min = obj.attr("min"); var max = obj.attr("max"); var range = Math.round(max - min); var percentage = Math.round((value - min) * 100 / range); var nextObj = obj.next(); nextObj.find("span.bar-btn").css("left", percentage + "%"); nextObj.find("span.bar > span").css("width", percentage + "%"); nextObj.find("span.bar-btn > span").text(percentage); }; 

 .range-slider { margin: 30px 0 0; display: inline-block; width: 100%; box-sizing: border-box; position: relative; } .range-slider>input { opacity: 0; width: 100%; position: relative; z-index: 5; -webkit-appearance: none; } .range-slider>input::-webkit-slider-thumb { -webkit-appearance: none; z-index: 100; position: relative; width: 50px; height: 30px; -webkit-border-radius: 10px; } .range-slider>span.slider-container { // min-height: 110px; display: inline-block; position: absolute; top: 0px; left: -8px; right: 46px; z-index: 3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .range-slider>span.slider-container>span.bar { background-color: #e5e5e5; display: inline-block; position: absolute; z-index: 1; top: 17px; left: 0; right: 0; height: 3px; overflow: hidden; border-radius: 10px; } .range-slider>span.slider-container>span.bar>span { background: #d7302d; background: -webkit-gradient(left top, right bottom, color-stop(0, #d7302d), color-stop(100%, #e82573)); background: linear-gradient(135deg, #d7302d 0, #e82573 100%); display: inline-block; float: left; height: 3px; width: 0%; } .range-slider>span.slider-container>span.bar-btn { position: absolute; text-align: center; top: 0; color: #fff; font: 600 16px "Roboto Condensed", sans-serif; z-index: 1; text-align: center; width: 38px; height: 38px; line-height: 38px; } .range-slider>span.slider-container>span.bar-btn:after { content: ""; background-color: #cc202e; border-radius: 20px; width: 38px; height: 38px; display: inline-block; position: absolute; left: 0; top: 0; z-index: -1; -webkit-box-shadow: 0 0 0 4px #cc202e; box-shadow: 0 0 0 4px rgba(204, 32, 46, 0.2) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Please Select</h1> <input class="slider" value="20" min="0" max="100" name="rangeslider" type="range" /> 

Answer 2

只需用舊代碼替換此代碼

$(function() {
  $(".slider").rangeslider();
});
$.fn.rangeslider = function(options) {
  var obj = this;
  var defautValue = obj.attr("value");
  obj.wrap("<span class='range-slider'></span>");
  obj.after("<span class='slider-container'><span class='bar'><span></span></span><span class='bar-btn'><span>0</span></span></span>");
  $(obj).on("change", function() {
    updateSlider(this)
  });
  return obj;
};

Answer 3

看起來您需要為滑塊對象使用jquery onchange來更新和觸發updateSlider()函數，這在IE 11中有點不穩定，但它開始更新，在IE中，您可以進一步進行改進，請參見下面的代碼

 $(function() { $(".slider").rangeslider(); }); $.fn.rangeslider = function(options) { var obj = this; var defautValue = obj.attr("value"); obj.wrap("<span class='range-slider'></span>"); obj.after("<span class='slider-container'><span class='bar'><span></span></span><span class='bar-btn'><span>0</span></span></span>"); $(obj).on("change", function() { updateSlider(this) }); return obj; }; function updateSlider(passObj) { var obj = $(passObj); var value = obj.val(); var min = obj.attr("min"); var max = obj.attr("max"); var range = Math.round(max - min); var percentage = Math.round((value - min) * 100 / range); var nextObj = obj.next(); nextObj.find("span.bar-btn").css("left", percentage + "%"); nextObj.find("span.bar > span").css("width", percentage + "%"); nextObj.find("span.bar-btn > span").text(percentage); }; 

 .range-slider { margin: 30px 0 0; display: inline-block; width: 100%; box-sizing: border-box; position: relative; } .range-slider>input { opacity: 0; width: 100%; position: relative; z-index: 5; -webkit-appearance: none; } .range-slider>input::-webkit-slider-thumb { -webkit-appearance: none; z-index: 100; position: relative; width: 50px; height: 30px; -webkit-border-radius: 10px; } .range-slider>span.slider-container { // min-height: 110px; display: inline-block; position: absolute; top: 0px; left: -8px; right: 46px; z-index: 3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .range-slider>span.slider-container>span.bar { background-color: #e5e5e5; display: inline-block; position: absolute; z-index: 1; top: 17px; left: 0; right: 0; height: 3px; overflow: hidden; border-radius: 10px; } .range-slider>span.slider-container>span.bar>span { background: #d7302d; background: -webkit-gradient(left top, right bottom, color-stop(0, #d7302d), color-stop(100%, #e82573)); background: linear-gradient(135deg, #d7302d 0, #e82573 100%); display: inline-block; float: left; height: 3px; width: 0%; } .range-slider>span.slider-container>span.bar-btn { position: absolute; text-align: center; top: 0; color: #fff; font: 600 16px "Roboto Condensed", sans-serif; z-index: 1; text-align: center; width: 38px; height: 38px; line-height: 38px; } .range-slider>span.slider-container>span.bar-btn:after { content: ""; background-color: #cc202e; border-radius: 20px; width: 38px; height: 38px; display: inline-block; position: absolute; left: 0; top: 0; z-index: -1; -webkit-box-shadow: 0 0 0 4px #cc202e; box-shadow: 0 0 0 4px rgba(204, 32, 46, 0.2) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Please Select</h1> <input class="slider" value="20" min="0" max="100" name="rangeslider" type="range" />