Range Slider styling doesn't work on edge - css

Question

My CSS style for the range slider doesn't work on Edge. How can I fix the Problem?
I searched on the web for a solution. And added some codes but still not working.
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
width: 15px !important;
height: 15px !important;
border-radius: 50% !important;
background: #33A2D9 !important;
cursor: pointer !important;;
}
input[type=range]::-ms-fill-upper {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
What it should look like (for example on Firefox):
What it look like on edge:

Answer 1

Your "mistake" (if we can call it that) was giving the input a background. You want to give it background-color of transparent and give the -track the desired shade.
Also, as a minor side note and general rule, avoid using background instead of background-color. It is shorter, but it sets a bunch of other background- properties, which you normally don't care about but are a source of common bugs.
Since it tends to be repetitive, I wrote it in SCSS:
$input-height: 16px;
$track-height: 6px;
$thumb-bg: #33A2D9;
$track-bg: #d3d3d3;
#mixin slider-thumb {
width: $input-height;
height: $input-height;
border-radius: $input-height/2;
background-color: $thumb-bg;
appearance: none;
}
#mixin slider-track {
height: $track-height;
border-radius: $track-height/2;
background-color: $track-bg;
appearance: none;
}
.slider[type=range] {
-webkit-transition: .2s;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: $input-height;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
&:hover, &:focus, &:active {
opacity: 1;
}
&::-webkit-slider- {
&runnable-track {
-webkit-appearance: none;
#include slider-track;
}
&thumb {
-webkit-appearance: none;
#include slider-thumb;
margin-top: -($input-height - $track-height)/2;
}
}
&::-moz-range- {
&track {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
&::-ms- {
&track {
#include slider-track;
}
&fill-upper {
#include slider-track;
}
&fill-lower {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
}
Resulting in the following CSS:
.slider[type=range] {
-webkit-appearance: none;
-webkit-transition: .2s;
width: 100%;
height: 16px;
border-radius: 3px;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
}
.slider[type=range]:hover, .slider[type=range]:focus, .slider[type=range]:active {
opacity: 1;
}
.slider[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-webkit-slider-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
-webkit-appearance: none;
appearance: none;
margin-top: -5px;
}
.slider[type=range]::-moz-range-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
.slider[type=range]::-ms-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-upper {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-lower {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
<input type=range class=slider>
Playground here.