responsive Interactive pricing component with pure Javascript

crossing the design of the input:range i didn_t figure out hoq to add the image icon-slider over the slider thumb. I used the suit selector before but it didn't work here is the snippets code:

#rate_views{
  -webkit-appearance: none;
  outline: none;
  border: none;
  background: var(--range-bg);
  color: var(--range-color);
  width: 80%;
  height: 7px;
  border-radius: 24px;
  
}

#rate_views::-webkit-slider-thumb{
  position: relative;
  top: 0;
  left: 0;
  -webkit-appearance: none;
  outline: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--range-color);
  cursor: pointer;
  box-shadow: 2px 3px 14px 0 var(--range-color);
}

#rate_views::-webkit-slider-thumb::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  background: url('../images/icon-slider.svg') no-repeat center center/cover ;
  background-repeat: no-repeat;
  background-position: center/cover;
}

seasoning needed

how to manage to make appear the background image icon-slider over the slider thumbs

Thanks Guys!