Range Slider无法在Internet Explorer上运行，只能在其他浏览器上运行

Question

My range slider is not working on internet explore 11 except all the other browser is support this plugin 100% and also working fine.

 $(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" /> 

I have been banging my head with this code from last two days. I cannot get any answer for this from many sites. I have searched google and w3schools to get help but I don't think so that they can help me anyways.

So, I came here and posting the question

If anyone can solve this issue that would be really appreciated.

Answer 1

You can use the input and change events to get a consistent user experience in all browsers:

 $(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

Just replace this code with the old one

$(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

Well looks like you need to use the jquery onchange for the slider object to update and trigger the updateSlider() function, tho it is a bit choppy in IE 11 but it started to update it, in IE, you can further make improvements, see code below

 $(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" />