Designing a compact slider for enhancing user experience not limited to webkit browsers requires utilizing a scss template such as
input {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1vmin;
}
input::-webkit-slider-thumb {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}
input::-moz-range-thumb {
cursor: pointer;
-moz-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}<!DOCTYPE html>
<body>
<input type="range">
</body>
</html>Although the -webkit-slider-thumb and -moz-range-thumb are specified on separate lines, individuals wonder why a structure like
input {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1vmin;
}
input::-webkit-slider-thumb, input::-moz-range-thumb {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 2vmin;
height: 2vmin;
background: red;
}<!DOCTYPE html>
<body>
<input type="range">
</body>
</html>does not function as expected? This behavior appears to be tied to specific engine properties.