Custom range slider issue on Internet Explorer - html

Question

Below is the css for my slider. The problem is that the slider is totally failing on IE.
Here is also the online version: https://codepen.io/mariomez/pen/yLNYdRg
I tried using MS fillers but it didn't go well as I am not familiar with how to properly use them.
.valeurPrix {
position: absolute;
top: -59px;
left: 177px;
}
.range-slider {
position: relative;
width: 450px;
float: left;
margin-right: 5px;
}
.range-slider .input-range {
-webkit-appearance: none;
width: 449px;
height: 5px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.range-slider .input-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-webkit-slider-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-webkit-slider-thumb {
background: #164188;
}
.range-slider .input-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-moz-range-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-moz-range-thumb {
background: #164188;
}
.range-slider .range-value {
display: inline-block;
position: relative;
width: 100px;
color: #fff;
font-size: 23px;
line-height: 32px;
text-align: center;
border-radius: 3px;
background: #164188;
padding: 5px 10px;
margin-left: 7px;
}
::-moz-range-track {
background: #ccc;
border: 0;
}
input::-moz-focus-inner {
border: 0;
}
Can you please guide me on how to use MS fillers on this code?

Answer 1

First, since the input event only supports input of type text and password in the IE browser, I suggest you could try to use the mouseup event to get the range value. Code as below:
var range = $('.input-range'),
value = $('.range-value');
value.html(range.attr('value') + ' %');
range.on('mouseup', function() {
value.html(this.value + ' %');
});
Second, please try to use the following CSS style:
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PrixMin {
float: left;
color: #164188;
font-size: 19px;
margin-right: 5px;
}
.selecteurPrix {
padding-top: 15px;
}
body {
font-family: sans-serif;
padding: 40px;
}
.valeurPrix {
position: absolute;
top: -59px;
left: 177px;
}
.range-slider {
position: relative;
width: 450px;
float: left;
margin-right: 5px;
}
#media (-webkit-min-device-pixel-ratio:0) {
/* Non-IE styles here*/
.range-slider .input-range {
-webkit-appearance: none;
width: 449px;
height: 5px;
border-radius: 5px;
background: #ccc;
outline: none;
}
}
#media (-ms-high-contrast:none),(-ms-high-contrast:active) {
/* IE styles here*/
.range-slider .input-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: 450px;
outline: none;
}
}
.range-slider .input-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-webkit-slider-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-webkit-slider-thumb {
background: #164188;
}
.range-slider .input-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-moz-range-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-moz-range-thumb {
background: #164188;
}
.range-slider .range-value {
display: inline-block;
position: relative;
width: 100px;
color: #fff;
font-size: 23px;
line-height: 32px;
text-align: center;
border-radius: 3px;
background: #164188;
padding: 5px 10px;
margin-left: 7px;
}
::-moz-range-track {
background: #ccc;
border: 0;
}
input::-moz-focus-inner {
border: 0;
}
input[type=range] {
margin: 2px;
}
input[type=range]::-ms-track {
width: 450px;
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: #ccc;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #164188;
}
input[type=range]:focus::-ms-fill-lower {
background: #ccc;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
</style>
The result in IE browser as below (you could find the whole sample code from here):

Answer 2

body {
padding: 30px;
}
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: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
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: goldenrod;
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: 300px;
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: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 300px;
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: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<input type="range">