Pure CSS solution:
input[range]
, and fill all the space left to
thumb with shadow color.::-ms-fill-lower
::-moz-range-progress
/*Chrome*/_x000D_
@media screen and (-webkit-min-device-pixel-ratio:0) {_x000D_
input[type='range'] {_x000D_
overflow: hidden;_x000D_
width: 80px;_x000D_
-webkit-appearance: none;_x000D_
background-color: #9a905d;_x000D_
}_x000D_
_x000D_
input[type='range']::-webkit-slider-runnable-track {_x000D_
height: 10px;_x000D_
-webkit-appearance: none;_x000D_
color: #13bba4;_x000D_
margin-top: -1px;_x000D_
}_x000D_
_x000D_
input[type='range']::-webkit-slider-thumb {_x000D_
width: 10px;_x000D_
-webkit-appearance: none;_x000D_
height: 10px;_x000D_
cursor: ew-resize;_x000D_
background: #434343;_x000D_
box-shadow: -80px 0 0 80px #43e5f7;_x000D_
}_x000D_
_x000D_
}_x000D_
/** FF*/_x000D_
input[type="range"]::-moz-range-progress {_x000D_
background-color: #43e5f7; _x000D_
}_x000D_
input[type="range"]::-moz-range-track { _x000D_
background-color: #9a905d;_x000D_
}_x000D_
/* IE*/_x000D_
input[type="range"]::-ms-fill-lower {_x000D_
background-color: #43e5f7; _x000D_
}_x000D_
input[type="range"]::-ms-fill-upper { _x000D_
background-color: #9a905d;_x000D_
}
_x000D_
<input type="range"/>
_x000D_