Range slider thumb is not showing on IE - html

Question

I have a range slider on my web which is working fine on all browser other than IE. I am using background image for thumb but that image is not showing on IE and also i am using pseudo element to show starting and ending point, which is also not visible on IE. Here is my code
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
input.range-slider__range {
-webkit-appearance: none;
max-width:100%;
height: 2px;
border:1px solid #06C3C3 !important;
outline: none;
padding: 0;
margin: 50px 0;}
input.range-slider__range:before {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: -2px;
border-radius: 50%;
background: #06C3C3;}
input.range-slider__range:after {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: 2px;
border-radius: 50%;
background: #06C3C3;}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}
.range-slider__range::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}

Answer 1

You use :-webkit-slider-thumb and ::-moz-range-thumb which, by their name, are properties for webkit browsers like chrome/safari etc. and moz which is for mozilla firefox .
So of course it won't appear on IE. For IE you can use ::-ms-thumb together with ms-track
:after,:before are pseudo-elements that are used to insert content after of the before the content of an element. input elements do not have content. ( just like img or hr etc. ). So the behavior in IE, to NOT display :after or :before on a 'non-content' HTML element.
, is the correct one.
You can wrap your input inside a label and add pseudo-elements to it.
Example below ( for IE )
input[type=range]::-ms-track {
width: 300px;
height: 5px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
label {
position: Relative;
}
label:after,
label:before {
content: '';
width: 7px;
height: 7px;
position: absolute;
display: block;
top: 0;
border-radius: 50%;
background: #06C3C3;
}
label:before {
left: 2px;
}
label:after {
right: 2px;
}
<label>
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
</label>