slider-thumb перекрывается слайдером

Как выглядит:

Как должно выглядеть:

Код:

<div class="slider_block">
            <h1 class="title_slider">Slider</h1>
                <div class="sl">
                    <input type="range" min="1" max="100" value="50" class="slider">
                </div>
</div>

.sl {
    padding-top: 25px;
}

.slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    background: rgb(150, 150, 150);
    outline: none;
    border-radius:20px;
    overflow: hidden;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CC2FF;
    border: 4px solid #333;
    box-shadow: -407px 0 0 400px #4CC2FF;
  }