Range Slider not working on internet explore except working on other browsers

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