Почему -webkit-slider-thumb: hover не работает?

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">

Почему не работает зависание? Когда я установил желтый цвет фона при наведении курсора, он должен выполнить свою задачу.