在CSS中滑块的可运行轨道后面的图片

Question

我正在尝试获得此结果：

相反，我得到了这个结果：

我尝试了z-index并使用了overflow属性，但似乎没有一个我希望得到的结果。有谁知道如何解决这个问题？提前谢谢！

input[type='range'] {
      overflow: hidden;
      width: 20rem;
      height: 1rem;
      border-radius: 5rem;
      -webkit-appearance: none;
      background-color: white;
    }

    input[type='range']::-webkit-slider-runnable-track {
      height: 8rem;
      width: 4rem;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }

    input[type='range']::-webkit-slider-thumb {
      width: 20rem;
      height: 10rem;
      -webkit-appearance: none;
      height: 8rem;
      width: 4rem;
      cursor: pointer;
      background: url(../assets/img/manneke-pis-small.png);
      background-repeat: none;
      box-shadow: -80px 0 0 80px #FF9CAC;

    }

    .bg-slider{
      background-color: lightgray;
      height: 7rem;
      width: 28rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2rem;
    }

<div class="bg-slider">
     <input type="range" min="1" max="10" value="5" class="slider" id="myRange">
   </div>