-webki slider runnable track

input[type='range'] {
  width: 400px;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, #293043, #293043), #D7D7D7;
  background-size: var(60%, 0%) 100%;
  background-repeat: no-repeat;
  border-radius: 5px;

}

input[type='range']::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  background: #293043;
  border: solid white 1px;
  border-radius: 50%;
  margin-top: -6px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}

/** FF*/

input[type="range"]::-moz-range-progress {
  background-color: #293043;
  border-radius: 5px;
}

input[type="range"]::-moz-range-track {
  background-color: #D7D7D7;
  border-radius: 5px;
}

input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  background: #293043;
  border: solid white 1px;
  border-radius: 50%;
  margin-top: -6px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}

Source: stackoverflow.com

Similar codes

0 vote266 views1 answer
Galerija nije kreirana uspešno
CSS
0 vote186 views1 answer
Html5 video hide timeline bar
CSS
222 votes567 views6 answers
Bootstrap CSS CDN
CSS Bootstrap
0 vote179 views1 answer
For loop for increment id of div in jquery
CSS
1 vote238 views1 answer
Ie11 flex 1
CSS
2 votes183 views1 answer
Uninstall pm2
CSS
19 votes200 views3 answers
Center in grid
CSS
0 vote232 views1 answer
Input area bootstrap highlight
CSS Bootstrap
0 vote198 views1 answer
Auto-indenting on Sublime Text 3 - "Key Bindings"
CSS
0 vote181 views1 answer
How to allow text to be copied in an input element ionic
CSS