Как сверстать range инпут?

При верстке input возникла проблема.

Нужно чтобы слева от ползунка был отдельный цвет, он задается через тень, но чтобы она не выпирала применяется overflow: hidden и тогда сам ползунок обрезается.

CodePen.

Можно ли убрать свойство overflow: hidden.

Заранее всем спасибо!

input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
  overflow: hidden;
}