-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

7 votes370 views2 answers
Vue sass loader
CSS
0 vote356 views1 answer
Two background images css
CSS
0 vote390 views1 answer
Materialisecss
CSS
24 votes340 views1 answer
Css gradient animations
CSS
165 votes436 views6 answers
Box shadow inset
CSS
1 vote349 views1 answer
Slickjs height
CSS
2 votes377 views1 answer
New line in url
CSS
2 votes357 views2 answers
Mysqldump: Error: 'Access denied; you need (at least one of) the PROCESS privilege(s) for this operation' when trying to dump tablespace
CSS
11 votes358 views2 answers
How to center horizontally and vertically block div
CSS
5 votes379 views3 answers
Back color rbg
CSS