Como estilizar o Input Range?

Necessito estilizar o input com type="range", onde a estilização deve ser parecida com o do Spotify.

Exemplo Spotify:

O ranger deve possuir opacidade somente nos “valores” onde não se foi escutado a musica. Logo os “valores” onde se foi escutado a musica devera ficar da cor #D3D3D3:

inserir a descrição da imagem aqui

No evento :hover o ranger onde possui os “valores” onde se foi escutado a música, deverá ficar da cor #1DC85A:

inserir a descrição da imagem aqui

O que eu consegui fazer foi o seguinte: inserir a descrição da imagem aqui inserir a descrição da imagem aqui

CÓDIGO:

  input {     width: 100%;     height: 0.3rem;     margin-top: 0.4rem;     border-radius: 5px;     background-color: #d3d3d3;     opacity: 0.1;     -webkit-appearance: none;     -webkit-transition: 0.2s;     transition: opacity 0.2s;      &::-webkit-slider-thumb {       -webkit-appearance: none;       appearance: none;     }      &:hover {       background-color: #1dc85a;        &::-webkit-slider-thumb {         width: 15px;         height: 15px;         border-radius: 50%;         background-color: #ffffff;         cursor: pointer;       }     }   }