body { background : #ededf0; } input[type=range] { -webkit-appearance: none; background: linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%); background-position: center; background-size: 99% 4px; background-repeat: no-repeat; -webkit-appearance: none; width: 450px; height: 36px; border-radius: 1px; overflow: hidden; margin-top: 5px; margin-bottom: 5px; } input[type=range]::-webkit-slider-thumb { -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; background-color: #fff; pointer-events: none; border-radius: 3px; width: 16px; height: 16px; position: relative; } input[type=range]::-webkit-slider-thumb:before { position: absolute; top: 6px; left: -2000px; width: 2000px; height: 4px; background: #dd4814; content: ' '; }
<input name="jim" id="jim" type="range" min="0" max="100" value="0">