selector not works with input

Question

input[type=range]{
-webkit-appearance: none;
-moz-appearance: none;
width: 300px;
height: 20px;
background: lime;
}
input[type=range]::-webkit-slider-thumb,
input[type=range]::-moz-range-thumb{
-webkit-appearance: none;
-moz-appearance: none;
width: 20px; height: 20px;
background: red;
}
input[type=range]::-webkit-slider-thumb:hover,
input[type=range]::-moz-range-thumb:hover{
background: yellow;
}

<input type="range">

In this code I want the slider-thumb background yellow when hovering over it. But it not works. Why?

Answer 1

You can use WebKit and moz seperately
Moz for input range is mostly use for Firefox web browser
So you can put you code
Seperately
If someone access code in chrome ,opera etc then Brower will take -webkit code part or if the some access code in Firefox then Brower will access Moz part

I have edited 🔫 Rick Grimes Bhiaya code
here is what I am saying:
https://code.sololearn.com/Wk0IO7lSZALL/?ref=app

Answer 2

It works only with -webkit-

I tried removing -moz- and it works as you want.

https://code.sololearn.com/WSUk70bJim63/?ref=app